告别刷新就丢数据！localStorage 全面指南localStorage：网页本地存储在现代 Web 开发中，为了

localStorage：网页本地存储

在现代 Web 开发中，为了提升用户体验和减少服务器请求，前端常常需要将一些数据缓存在用户的浏览器中。HTML5 提供了多种客户端存储方案，其中 localStorage 是最常用的一种持久化存储机制。

一、什么是 `localStorage`

localStorage 是一种由浏览器提供的 Web Storage API，它允许网页在用户的浏览器中长期保存键值对数据。与 sessionStorage 不同的是，localStorage 的数据不会因为浏览器关闭或页面刷新而丢失，只有当用户主动清除浏览器缓存或者通过代码显式删除时，这些数据才会被清除。

二、基本特性

持久性：数据可以在浏览器中长期保存
作用域：同源策略限制（相同协议 + 域名 + 端口）
容量限制：通常最大为 5MB（视浏览器而定），若数据比5MB还大可以使用indexDB

数据类型：只能存储字符串，复杂类型需序列化

    const person = {
        name: "张三",
        age: 18,
    }
    localStorage.setItem('personName', person); // 没有序列化
    localStorage.setItem('person', JSON.stringify(person)); // 序列化

	let persons = JSON.parse(localStorage.getItem('persons')); // 将json字符串zh

同步操作：所有操作都是同步的，可能影响性能

三、常用方法

localStorage 提供了一组简单易用的方法来进行数据操作：


localStorage.setItem('key', 'value');// 存储数据

const value = localStorage.getItem('key');// 获取数据

localStorage.removeItem('key');// 删除数据

localStorage.clear();// 清空所有数据

const keyName = localStorage.key(n);// 获取第 n 个 key 的名称

const length = localStorage.length;// 获取当前存储项的数量

以一个增加列表项为例：

输入姓名年龄后存储到localStorage，再次刷新页面数据依然存在。

html代码

    <form action="">
      姓名<input
        type="text"
        name="username"
        id="username"
        placeholder="请输入姓名"
        required
      /><br />
      年龄<input
        type="text"
        name="userage"
        id="userage"
        placeholder="请输入年龄"
        required
      />
      <input type="submit" value="提交" />
    </form>
    <ul id="person-list"></ul>

js代码

        
      const key = "persons";
		// 添加数据
      document.querySelector("form").addEventListener("submit", (e) => {
        e.preventDefault();
        const username = e.target.username.value;
        const userage = e.target.userage.value;
        if (!username || !userage) return;
        const person = {
          username: username,
          userage: userage,
        };
        let persons = JSON.parse(localStorage.getItem(key)) || [];
        persons.push(person);
        localStorage.setItem(key, JSON.stringify(persons));
        refush();
      });

      document.addEventListener("DOMContentLoaded", () => {
        refush();
      });
		
 		// 读取localStorage中的数据并展示
      function refush() {
        const personUl = document.getElementById("person-list");
        const persons = JSON.parse(localStorage.getItem(key)) || [];
        if(persons.length === 0){
          personUl.innerHTML = "暂无数据";
          return;
        }
        personUl.innerHTML = "";
        persons.forEach((person) => {
          const li = document.createElement("li");
          li.innerHTML = `${person.username} ${person.userage}`;
          personUl.appendChild(li);
        });
      }

初始时没有任何数据

localStorage存储实现，刷新后数据不丢失

四、用途与注意事项

localStorage适合存储用户的非敏感偏好设置（如主题、语言），缓存静态数据（如菜单结构、地区列表），实现轻量级的状态管理（如登录态标记）

不适合存储敏感信息（如密码、token），容易受到 XSS 攻击。存储大量结构化数据时，应考虑使用 IndexedDB，也不是和存储频繁更新的数据，避免阻塞主线程

六、与其他存储方式对比

存储方式	生命周期	容量	类型	安全性	适用场景
`localStorage`	永久	5MB 左右	字符串	低（易受 XSS）	轻量缓存、偏好设置
`sessionStorage`	浏览器标签关闭即失效	5MB 左右	字符串	低	单次会话数据
`Cookie`	可设置过期时间	4KB 左右	字符串	中（可加密传输）	登录态、跟踪用户
`IndexedDB`	永久	几百 MB 到 GB 级	结构化数据	高	大数据、离线应用
`Web Worker Cache`	自定义	无明确限制	可缓存资源	高	PWA、Service Worker 缓存

告别刷新就丢数据！localStorage 全面指南