首页 > 文章 > web前端 > 掌握 Web 开发中的本地存储

掌握 Web 开发中的本地存储

王林原创: 2024-07-24 15:26:50549浏览

Mastering Local Storage in Web Development

本地存储是一种有用的 Web 开发工具，使开发人员能够在用户的浏览器中保存数据。在本文中，我们将介绍本地存储的不同功能，从初学者级别的示例开始，然后继续介绍更复杂的技术。读完本指南后，您将对如何在 Web 应用程序中成功使用本地存储有基本的了解。

本地存储的初级示例

1。存储用户首选项：

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

当用户选择一个主题并点击“保存首选项”按钮时，此代码会将主题记录到控制台。要阅读此日志，请打开浏览器的开发人员工具（通常按 F12 或右键单击页面并选择“检查”）并转到控制台选项卡。（了解更多）

2。记住用户输入：

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

此 HTML 示例生成一个简单的网页，允许用户在文本字段中输入文本并将其保存到浏览器的本地存储中。

当用户在输入框中输入文本并点击“保存输入”按钮时，文本将保存在浏览器的本地存储中。这意味着即使用户刷新网站或关闭并重新打开浏览器，保存的输入仍然可以访问。控制台日志和警报通知用户其输入已成功保存。 (阅读更多)

3。购物车持久化：

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

此示例演示如何使用本地存储保存购物车。添加到购物车的商品将作为数组保存在本地存储中的“cart”键下。页面加载时，将从本地存储中提取并显示已保存的购物车项目。

当您单击“将商品 X 添加到购物车”按钮之一时，相应的商品将添加到购物车中，并且更新的购物车内容将显示在控制台中。要检查这些日志，请打开浏览器的开发人员工具（通常按 F12 或右键单击页面并选择“检查”）并转到控制台选项卡。

您还可以直接通过浏览器的开发者工具查看本地存储。大多数浏览器允许您通过右键单击页面，选择“检查”以获取开发人员工具，然后导航到“应用程序”或“存储”选项卡来执行此操作。从那里，展开“本地存储”部分以查看网站的键值对。在此示例中，键“cart”包含表示已保存的购物车项目的 JSON 字符串。
阅读全文 - 掌握 Web 开发中的本地存储：8 个实践示例，从新手到专家！

学习 Json - 点击这里

以上是掌握 Web 开发中的本地存储的详细内容。更多信息请关注PHP中文网其他相关文章！

json html String Array if using console this alert input

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Building Responsive, Equal-Height Cards with Modern CSS (Magic of Flexbox & No Media Queries)下一篇：How to Use Star Rating in Tailwind CSS

查看更多