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

localStorage:网页本地存储

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

一、什么是 localStorage

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

二、基本特性

  • 持久性:数据可以在浏览器中长期保存

  • 作用域:同源策略限制(相同协议 + 域名 + 端口)

  • 容量限制:通常最大为 5MB(视浏览器而定),若数据比5MB还大可以使用indexDB

  • 数据类型:只能存储字符串,复杂类型需序列化

    js 复制代码
        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 提供了一组简单易用的方法来进行数据操作:

js 复制代码
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代码

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代码

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 缓存
相关推荐
yanlele25 分钟前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang45329 分钟前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友34 分钟前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir35 分钟前
vue3.2 前端动态分页算法
前端·算法
烛阴1 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子1 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead2 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界2 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser3 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app