localStorage:网页本地存储
在现代 Web 开发中,为了提升用户体验和减少服务器请求,前端常常需要将一些数据缓存在用户的浏览器中。HTML5 提供了多种客户端存储方案,其中 localStorage
是最常用的一种持久化存储机制。
一、什么是 localStorage
localStorage
是一种由浏览器提供的 Web Storage API,它允许网页在用户的浏览器中长期保存键值对数据 。与 sessionStorage
不同的是,localStorage
的数据不会因为浏览器关闭或页面刷新而丢失,只有当用户主动清除浏览器缓存或者通过代码显式删除时,这些数据才会被清除。
二、基本特性
-
持久性:数据可以在浏览器中长期保存
-
作用域:同源策略限制(相同协议 + 域名 + 端口)
-
容量限制:通常最大为 5MB(视浏览器而定),若数据比5MB还大可以使用indexDB
-
数据类型:只能存储字符串,复杂类型需序列化
jsconst 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 缓存 |