Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 12395, member: 3917"]
So, ich habe das Speichern im Localstorage implementiert und es funktioniert so weit:
[CODE]<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weblink to IQOS Notification</title>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <style>
        #meldungsnr-input {
            border: 2px solid green;
            outline: none;
            font-size: 1em;
            width: 5em;
        }

/* Ist die Eingabe ungueltig machen wir den Rahmen grau: */
        #meldungsnr-input:invalid {
            border: 2px solid grey;
        }
    </style>
</head>

<body>
    <label>
        Please enter a claim number:
        
        <input id="meldungsnr-input" list="datalist-claimnr" required pattern="[\d+]{6}" maxlength="6" ,
            title="Please enter a valid claim number" autofocus="autofocus" placeholder="" autocomplete="off">
    </label>
    <datalist id="datalist-claimnr"></datalist>
    <script>
        const
            maxOptions = 3,
            url = 'https://die-url-vor-meldungsnummer';

// Zuvor eingegebene Claimnumbers aus dem Localstorage lesen
        // und die Optionen der Datalist generieren:
        const jsonNr = localStorage.getItem('claimnumbers')
        if (jsonNr) {
            const nrArray = JSON.parse(jsonNr);
            nrArray.forEach(nr => {
                insertOption(nr);
            });
        }

// Eventlistener fuer Tastendruck registrieren:
        document.getElementById('meldungsnr-input').addEventListener('keypress', event => {
            // Wurde die Enter-Taste gedrückt und ist die Eingabe fehlerfrei?
            if (event.key === "Enter" && event.target.validity.valid) {
                // Meldungsnummer aus dem Eingabefeld holen
                // Sicherheitshalber entfernen wir fuehrende und folgende
                // Leerzeichen durch Aufruf von trim:
                const meldungsnr = event.target.value.trim(),
                    // vollstaendige URL zusammen bauen:
                    urlComplete = url + meldungsnr + '.de';
                console.log(urlComplete)
                insertOption(meldungsnr);
                event.target.value = '';
                // und aufrufen:
                location.href = urlComplete;
            }
        });

// Neue Option in Datalist eintragen:
        function insertOption(nr) {
            const datalist = document.getElementById('datalist-claimnr');
            // Die Option erzeugen und in die Datalist eintragen:
            const newOption = new Option(nr);
            datalist.prepend(newOption);
            // Array mit Claimnumbers in Localstorage eintragen:
            const options = document.querySelectorAll('#datalist-claimnr option');
            let nrArray = [];
            options.forEach(opt => {
                nrArray.push(opt.textContent)
            });
            localStorage.setItem('claimnumbers', JSON.stringify(nrArray));
            console.log(nrArray)
        }
    </script>
</body>[/CODE]
BTW: Wenn bei euch Englisch die bevorzugte Sprache ist, wäre es vielleicht angebracht, auch die anderen Variablennamen, IDs etc. auf Englisch umzuändern.
[/QUOTE]

Authentifizierung