Heim > Artikel > Web-Frontend > Beherrschung des lokalen Speichers in der Webentwicklung

Beherrschung des lokalen Speichers in der Webentwicklung

王林Original: 2024-07-24 15:26:50470Durchsuche

Mastering Local Storage in Web Development

Lokaler Speicher ist ein nützliches Webentwicklungstool, das es Entwicklern ermöglicht, Daten im Browser des Benutzers zu speichern. In diesem Artikel befassen wir uns mit verschiedenen Funktionen des lokalen Speichers, beginnend mit Beispielen für Anfänger bis hin zu komplexeren Techniken. Am Ende dieses Leitfadens verfügen Sie über ein grundlegendes Verständnis für die erfolgreiche Verwendung von lokalem Speicher in Webanwendungen.

Beispiele für Anfänger zum lokalen Speicher

1. Benutzereinstellungen speichern:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Preferences</title>
</head>

<body>
    <label for="theme">Choose a theme:</label>
    <select id="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="medium">Medium</option>
    </select>
    <button onclick="savePreference()">Save Preference</button>

    <script>
        function savePreference() {
            const selectedTheme = document.getElementById('theme').value;
            localStorage.setItem('theme', selectedTheme);
            console.log('Preference saved:', selectedTheme);
            alert('Preference saved!' + " " + selectedTheme);
        }
    </script>
</body>

</html>

Wenn der Benutzer ein Thema auswählt und auf die Schaltfläche „Einstellungen speichern“ klickt, protokolliert dieser Code das Thema in der Konsole. Um dieses Protokoll zu lesen, öffnen Sie die Entwicklertools des Browsers (normalerweise durch Drücken von F12 oder Rechtsklick auf die Seite und Auswahl von „Inspizieren“) und gehen Sie zur Registerkarte „Konsole“. (Weiterlesen)

2. Benutzereingaben speichern:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remember User Input</title>
</head>

<body>
    <input type="text" id="userInput">
    <button onclick="saveInput()">Save Input</button>

    <script>
        function saveInput() {
            const userInput = document.getElementById('userInput').value;
            localStorage.setItem('savedInput', userInput);
            console.log(userInput + " " + 'saved !');
            alert('Input saved!');
        }
    </script>
</body>

</html>

Dieses HTML-Beispiel generiert eine einfache Webseite, die es Benutzern ermöglicht, Text in ein Textfeld einzugeben und ihn im lokalen Speicher ihres Browsers zu speichern.

Wenn ein Benutzer Text in das Eingabefeld eingibt und auf die Schaltfläche „Eingabe speichern“ klickt, wird der Text im lokalen Speicher des Browsers gespeichert. Dies bedeutet, dass die gespeicherten Eingaben auch dann zugänglich bleiben, wenn Benutzer die Website aktualisieren oder den Browser schließen und erneut öffnen. Das Konsolenprotokoll und die Warnung informieren den Benutzer darüber, dass seine Eingabe erfolgreich gespeichert wurde. (Weiterlesen)

3. Warenkorb-Persistenz:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
</head>

<body>
    <h1>Shopping Cart</h1>
    <ul id="cartItems"></ul>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
            const cartItemsElement = document.getElementById('cartItems');

            savedCart.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                cartItemsElement.appendChild(li);
            });
            console.log('Saved cart items:', savedCart);
        });

        function addToCart(item) {
            const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
            savedCart.push(item);
            localStorage.setItem('cart', JSON.stringify(savedCart));
            console.log('Added', item, 'to cart');
            location.reload(); // Refresh the page to reflect changes
        }
    </script>

    <button onclick="addToCart('Item 1')">Add Item 1 to Cart</button>
    <button onclick="addToCart('Item 2')">Add Item 2 to Cart</button>
    <button onclick="addToCart('Item 3')">Add Item 3 to Cart</button>
</body>

</html>

Dieses Beispiel zeigt, wie Sie einen Warenkorb mithilfe des lokalen Speichers speichern. Dem Warenkorb hinzugefügte Artikel werden als Array im lokalen Speicher unter dem Schlüssel „Warenkorb“ gespeichert. Wenn die Seite geladen wird, werden die gespeicherten Warenkorbartikel aus dem lokalen Speicher abgerufen und angezeigt.

Wenn Sie auf eine der Schaltflächen „Artikel X zum Warenkorb hinzufügen“ klicken, wird der entsprechende Artikel zum Warenkorb hinzugefügt und der aktualisierte Warenkorbinhalt wird in der Konsole angezeigt. Um diese Protokolle zu überprüfen, öffnen Sie die Entwicklertools des Browsers (normalerweise indem Sie F12 drücken oder mit der rechten Maustaste auf die Seite klicken und „Inspizieren“ auswählen) und gehen Sie zur Registerkarte „Konsole“.

Sie können den lokalen Speicher auch direkt über die Entwicklertools des Browsers anzeigen. Bei den meisten Browsern können Sie dies tun, indem Sie mit der rechten Maustaste auf die Seite klicken, „Inspizieren“ auswählen, um die Entwicklertools zu erhalten, und dann zur Registerkarte „Anwendung“ oder „Speicher“ navigieren. Erweitern Sie von dort aus den Abschnitt „Lokaler Speicher“, um die Schlüssel-Wert-Paare der Website anzuzeigen. In diesem Beispiel enthält der Schlüssel „cart“ die JSON-Zeichenfolge, die die gespeicherten Warenkorbartikel darstellt.
Vollständigen Artikel lesen – Lokalen Speicher in der Webentwicklung beherrschen: 8 praktische Beispiele, vom Anfänger zum Experten!

Json lernen – Klicken Sie hier

Das obige ist der detaillierte Inhalt vonBeherrschung des lokalen Speichers in der Webentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json html String Array if using console this alert input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen Sie reaktionsfähige Karten gleicher Höhe mit modernem CSS (Magie von Flexbox und keine Medienabfragen)Nächster Artikel：Erstellen Sie reaktionsfähige Karten gleicher Höhe mit modernem CSS (Magie von Flexbox und keine Medienabfragen)

In Verbindung stehende Artikel

Mehr sehen