Maison > Article > interface Web > Maîtriser le stockage local dans le développement Web

Maîtriser le stockage local dans le développement Web

王林original: 2024-07-24 15:26:50538parcourir

Mastering Local Storage in Web Development

Le stockage local est un outil de développement Web utile qui permet aux développeurs de sauvegarder des données dans le navigateur de l'utilisateur. Dans cet article, nous examinerons différentes fonctionnalités du stockage local, en commençant par des exemples de niveau débutant et en passant à des techniques plus complexes. À la fin de ce guide, vous aurez une compréhension de base de la façon d'utiliser avec succès le stockage local dans les applications Web.

Exemples de niveau débutant sur le stockage local

1. Stockage des préférences utilisateur :

<!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>

Lorsque l'utilisateur sélectionne un thème et clique sur le bouton « Enregistrer les préférences », ce code enregistre le thème sur la console. Pour lire ce journal, ouvrez les outils de développement du navigateur (généralement en appuyant sur F12 ou en cliquant avec le bouton droit sur la page et en sélectionnant « Inspecter ») et accédez à l'onglet de la console. (Lire la suite)

2. Mémorisation des entrées de l'utilisateur :

<!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>

Cet exemple HTML génère une page Web simple qui permet aux utilisateurs de saisir du texte dans un champ de texte et de l'enregistrer dans le stockage local de leur navigateur.

Lorsqu'un utilisateur saisit du texte dans la zone de saisie et clique sur le bouton « Enregistrer la saisie », le texte est enregistré dans le stockage local du navigateur. Cela implique que même si les utilisateurs actualisent le site Web ou ferment et rouvrent le navigateur, les entrées enregistrées resteront accessibles. Le journal et l'alerte de la console informent l'utilisateur que sa saisie a été enregistrée avec succès. (Lire la suite)

3. Persistance du panier :

<!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>

Cet exemple montre comment enregistrer un panier en utilisant le stockage local. Les articles ajoutés au panier sont enregistrés sous forme de tableau dans le stockage local sous la clé « panier ». Lorsque la page se charge, les éléments du panier enregistrés sont extraits du stockage local et affichés.

Lorsque vous cliquez sur l'un des boutons « Ajouter l'article X au panier », l'article approprié est ajouté au panier et le contenu du panier mis à jour est affiché dans la console. Pour inspecter ces journaux, ouvrez les outils de développement du navigateur (généralement en appuyant sur F12 ou en cliquant avec le bouton droit sur la page et en sélectionnant « Inspecter ») et accédez à l'onglet de la console.

Vous pouvez également afficher le stockage local directement via les outils de développement du navigateur. La plupart des navigateurs vous permettent de le faire en cliquant avec le bouton droit sur la page, en sélectionnant « Inspecter » pour obtenir les outils de développement, puis en accédant à l'onglet « Application » ou « Stockage ». À partir de là, développez la section « Stockage local » pour afficher les paires clé-valeur du site Web. Dans cet exemple, la clé « panier » inclut la chaîne JSON représentant les éléments du panier enregistrés.
Lire l'article complet - Maîtriser le stockage local dans le développement Web : 8 exemples pratiques, du novice à l'expert !

Apprenez Json - Cliquez ici

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

json html String Array if using console this alert input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Création de cartes réactives de même hauteur avec un CSS moderne (Magie de Flexbox et aucune requête multimédia)Article suivant：Création de cartes réactives de même hauteur avec un CSS moderne (Magie de Flexbox et aucune requête multimédia)

Articles Liés

Voir plus