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