HTML本地存储是HTML5提供的在客户端保存数据的机制，不需要依赖后端服务器，就可以在用户的浏览器中存储键值对数据，LocalStorage是其中最常用的实现方式之一，适合存储不需要频繁变更的用户配置、临时状态等数据。
LocalStorage基本概念
LocalStorage属于Web Storage规范的一部分，它的核心特点是存储的数据没有过期时间，除非用户手动清除浏览器缓存，或者开发者通过代码删除，否则数据会一直保存在客户端。和另一个本地存储方案SessionStorage不同，LocalStorage的数据不会因为页面关闭、浏览器重启而丢失，同一个域名下的所有页面都可以共享同一份LocalStorage数据。
LocalStorage核心操作方法
LocalStorage的操作非常简单，所有方法都挂载在window.localStorage对象上，下面逐个介绍常用的方法。
1. 存储数据：setItem
使用setItem方法可以向LocalStorage中存储数据，它接收两个参数，第一个是键名，第二个是对应的值，值会被自动转换为字符串类型存储。
// 存储字符串数据
localStorage.setItem('username', '张三');
// 存储对象数据，需要先转换为JSON字符串
const userConfig = {
theme: 'dark',
fontSize: 16
};
localStorage.setItem('userConfig', JSON.stringify(userConfig));2. 读取数据：getItem
使用getItem方法可以读取LocalStorage中存储的数据，传入对应的键名，返回对应的值，如果键名不存在则返回null。
// 读取字符串数据
const username = localStorage.getItem('username');
console.log(username); // 输出：张三
// 读取对象数据，需要把JSON字符串转回对象
const configStr = localStorage.getItem('userConfig');
if (configStr) {
const userConfig = JSON.parse(configStr);
console.log(userConfig.theme); // 输出：dark
}3. 删除单个数据：removeItem
如果只需要删除LocalStorage中的某一条数据，可以使用removeItem方法，传入要删除的键名即可。
// 删除username对应的数据
localStorage.removeItem('username');
// 再次读取会返回null
console.log(localStorage.getItem('username')); // 输出：null4. 清空所有数据：clear
如果需要清空当前域名下所有的LocalStorage数据，可以使用clear方法，这个方法没有参数，会清除所有存储的键值对。
// 清空所有LocalStorage数据 localStorage.clear(); console.log(localStorage.length); // 输出：0
LocalStorage使用注意事项
- 存储容量限制：大多数浏览器的LocalStorage存储上限是5MB，超过这个限制会抛出
QuotaExceededError错误，存储大文件、大量数据时不建议使用。 - 数据类型限制：LocalStorage只能存储字符串类型的数据，如果要存储对象、数组等复杂类型，需要先使用
JSON.stringify转换为字符串，读取时再用JSON.parse转回原类型。 - 同源策略限制：只有同一个域名、同一个协议、同一个端口下的页面才能共享LocalStorage数据，不同域名的页面无法互相访问对方的LocalStorage。
- 隐私模式限制：部分浏览器的隐私模式下，LocalStorage可能无法正常使用，或者关闭隐私窗口后数据会被自动清除，开发时需要做兼容处理。
简单实战示例：保存用户主题偏好
下面是一个实际的使用场景，保存用户选择的页面主题，下次打开页面时自动应用之前的主题设置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主题切换示例</title>
<style>
.light { background-color: #fff; color: #333; }
.dark { background-color: #333; color: #fff; }
</style>
</head>
<body>
<button onclick="switchTheme('light')">浅色主题</button>
<button onclick="switchTheme('dark')">深色主题</button>
<p>当前页面内容</p>
<script>
// 页面加载时读取保存的主题
const savedTheme = localStorage.getItem('pageTheme') || 'light';
document.body.className = savedTheme;
// 切换主题并保存
function switchTheme(theme) {
document.body.className = theme;
localStorage.setItem('pageTheme', theme);
}
</script>
</body>
</html>这个示例中，用户点击主题按钮后，会切换页面样式，同时把主题名称存到LocalStorage里，下次打开页面时，脚本会先读取保存的主题，直接应用对应的样式，不需要用户再次选择。
HTML5_local_storage本地存储Web_Storage前端存储修改时间：2026-06-06 05:05:24