对于“吃货🍔”，完成品尝记录，你必须了解 LocalStorage

是染染啊
220 阅读4分钟

深入讲解 HTML5 LocalStorage

引言

HTML5引入了localStorage作为浏览器端存储解决方案的一部分，它允许Web应用以键值对的形式存储数据，并且这些数据在浏览器关闭后仍然存在。与传统的cookie相比，localStorage提供了更大的存储空间（通常为5MB），并且不会随着每个HTTP请求发送到服务器，因此更适合用于保存非敏感的用户偏好设置或应用状态。

🍔 下面我们来实现对于吃货来说，完成了对哪些美食的品尝。想象一下，你有一个名为“EatTracker”的应用，用户可以在其中添加他们想要尝试的美食（如各种塔帕斯、甜点、地方特色小吃等）。每当用户完成了某项美食体验后，他们可以标记该项为已完成。所有这些信息都将被存储在用户的浏览器中，以便下次访问时仍然可用。

image.png

1. 基础概念

  • 存储机制：localStorage采用键值对的方式存储字符串形式的数据。每个源（origin）都有独立的存储区域。
  • 持久性：除非用户手动清除或者通过JavaScript代码删除，否则localStorage中的数据会一直保存在用户的设备上。
  • 同源策略：遵循浏览器的安全模型，只有来自同一源的页面才能访问相同的localStorage对象。

2. API 方法

  • setItem(key, value) ：将键值对存入localStorage中。如果键已经存在，则更新其对应的值。
  • getItem(key) ：根据提供的键名获取存储项的值。如果找不到该键，则返回null。
  • removeItem(key) ：移除指定键名的存储项。
  • clear() ：清空当前源下所有的localStorage数据。
  • key(index) ：返回指定索引位置的键名。索引从0开始递增。

2e1e5344f2f4fe7c9c8c39bb2f3004a.png

3. 数据类型限制

由于localStorage只能存储字符串，当我们需要保存复杂的数据结构时，必须先将其序列化为JSON格式再进行存储；读取时则要反序列化回原始格式：

// 存储数组或对象
const items = [{ text: 'Item 1', done: false }];
localStorage.setItem('items', JSON.stringify(items));

// 获取并解析数据
const storedItems = JSON.parse(localStorage.getItem('items')) || [];

4. 实践案例分析

接下来，我们将结合具体的代码示例，详细讲解如何利用localStorage来实现一个简单的待办事项列表应用。这个例子不仅展示了localStorage的基本用法，还融入了一些优化技巧和最佳实践。

代码结构概览
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage Example</title>
    <!-- 样式和其他元信息 -->
</head>
<body>
    <div class="wrapper">
        <h2>To-Do List</h2>
        <ul class="plates"></ul>
        <form class="add-items">
            <input type="text" name="item" placeholder="Add new item" required>
            <button type="submit">Add</button>
        </form>
    </div>

    <script>
        const addItemsForm = document.querySelector('.add-items');
        const itemsList = document.querySelector('.plates');

        // 初始化或获取已存数据
        let items = JSON.parse(localStorage.getItem('items')) || [];

        // 添加项目
        function addItem(event) {
            event.preventDefault();
            const newItemText = event.target.querySelector('[name=item]').value.trim();
            if (!newItemText) return;

            items.push({ text: newItemText, done: false });
            updateUI();
            localStorage.setItem('items', JSON.stringify(items));
            event.target.reset();
        }

        // 更新UI
        function updateUI() {
            itemsList.innerHTML = '';
            items.forEach((item, index) => {
                const li = document.createElement('li');
                li.innerHTML = `
                    <input 
                        type="checkbox" 
                        data-index="${index}" 
                        ${item.done ? 'checked' : ''}
                    >
                    <label>${item.text}</label>
                `;
                itemsList.appendChild(li);
                li.querySelector('input').addEventListener('change', toggleDoneStatus);
            });
        }

        // 切换完成状态并更新本地存储
        function toggleDoneStatus(event) {
            const index = event.target.getAttribute('data-index');
            items[index].done = !items[index].done;
            localStorage.setItem('items', JSON.stringify(items));
            updateUI();
        }

        // 监听表单提交事件
        addItemsForm.addEventListener('submit', addItem);

        // 初始渲染
        updateUI();
    </script>
</body>
</html>

ezgif-3-4fe402d37e.gif

关键点解释
  • 初始化数据：通过JSON.parse(localStorage.getItem('items'))尝试从localStorage加载现有数据，若无则初始化为空数组。
  • 添加新项目：当用户提交表单时，首先检查输入框是否为空，然后创建一个新的待办事项对象，将其推入items数组，并调用updateUI()刷新界面，最后使用JSON.stringify()将更新后的数组转换为字符串形式保存到localStorage。
  • UI更新：遍历items数组，动态生成列表项并插入DOM树中。同时为每个复选框绑定事件监听器，以便处理状态变化。
  • 状态切换：每当用户点击复选框时，通过toggleDoneStatus()函数更新对应项目的完成状态，并同步到localStorage。

5. 性能优化建议

  • 减少DOM操作：尽可能批量修改DOM，避免频繁触发重排和重绘。如上述代码中，updateUI()函数一次构建所有列表项后再一次性插入文档流。
  • 事件委托：对于大量相似元素（如本例中的复选框），可以考虑使用事件委托代替逐个添加事件监听器，从而提高性能。
  • 延迟加载与懒加载：如果数据量较大，可考虑分页显示或按需加载部分数据，减轻初次渲染的压力。

结论

综上所述，localStorage是HTML5提供的一种简单而强大的客户端存储机制，适用于各种类型的Web应用。通过合理运用这一特性，我们可以轻松实现数据的持久化存储，同时结合其他前端技术优化用户体验。希望这篇文章能够帮助您更好地理解和使用localStorage。

avatar
文章
阅读
粉丝