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

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 缓存