在Web开发中，把数据暂存到用户浏览器端是常见的需求，比如记住登录状态、缓存接口结果或者保存草稿。JavaScript主要通过Web Storage API和IndexedDB来实现本地存储，不同方案在生命周期、容量和结构上差别很大。
一、localStorage的基本用法
localStorage是最简单的本地存储方式，它以字符串键值对的形式将数据保存在浏览器中，除非用户手动清除或用代码删除，否则数据永远存在。它的API非常直观，只有setItem、getItem、removeItem和clear四个方法。
下面演示如何存一个用户名并在刷新后读取：
// 保存数据到localStorage
localStorage.setItem('username', 'zhangsan');
// 读取数据
var name = localStorage.getItem('username');
console.log(name); // 输出 zhangsan
// 删除某条数据
localStorage.removeItem('username');
// 清空所有localStorage
localStorage.clear();
需要注意的是，localStorage只能存字符串。如果要保存对象，必须用JSON.stringify转换，读取时再用JSON.parse还原。另外，不同浏览器对localStorage的容量限制一般是5MB左右，存太多会抛异常。
它的优点是用起来零门槛、同步读写不费事；缺点是容量小、且同源页面共享，容易引发多标签页数据覆盖问题。敏感信息如token不建议直接放这里，因为任何脚本都能读取。
二、sessionStorage与localStorage的区别
sessionStorage的接口和localStorage完全一致，但数据只在当前标签页会话期间有效。一旦关闭标签页或浏览器，数据就被回收。即便同一个网站，从A页面新开一个标签页打开B页面，两者的sessionStorage也是互相隔离的。
这一特性特别适合存“一次性”数据，比如表单分步填写时的临时状态：
// 在步骤一页面保存表单数据
sessionStorage.setItem('step1', JSON.stringify({ phone: '13800000000' }));
// 步骤二页面读取，关闭后自动消失
var step1 = JSON.parse(sessionStorage.getItem('step1'));
对比来看，localStorage像冰箱里的存货，sessionStorage像手里的便签。如果做单页应用且不想污染全局存储，用sessionStorage能减少跨模块干扰。不过它同样只支持字符串、容量也有限。
在真实项目中，我们常把不变的配置放localStorage，把流程中的临时变量放sessionStorage，这样刷新页面不丢进度，关掉页面又不留垃圾。
三、用IndexedDB存储复杂数据
当要存上百条记录、文件blob或需要按索引查询时，Web Storage就力不从心了。IndexedDB是浏览器内置的事务型数据库，允许存任意结构化数据，容量通常可达几百MB甚至更多。
下面是一个打开数据库并写入一条记录的例子：
// 打开或创建数据库
var request = indexedDB.open('myDB', 1);
request.onupgradeneeded = function(event) {
var db = event.target.result;
// 创建对象仓库，指定主键
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
request.onsuccess = function(event) {
var db = event.target.result;
var tx = db.transaction('users', 'readwrite');
var store = tx.objectStore('users');
// 存入一个对象
store.put({ id: 1, name: 'lisi', age: 20 });
tx.oncomplete = function() {
console.log('数据写入完成');
};
};
IndexedDB基于事件回调，早期写起来比较绕，现在也可用Promise封装。它支持索引、游标遍历和版本迁移，适合离线应用和大量缓存。缺点是API复杂，新手容易在事务生命周期上踩坑。
如果项目只是存点简单配置，杀鸡无需用牛刀；但要做类原生App的Web应用，IndexedDB几乎是必选项。社区里也有localForage这类库，把localStorage和IndexedDB统一成简单异步接口。
四、存储方案的选择建议
面对三种方案，核心看数据体量、存活时长和结构复杂度。小且长期用的配置选localStorage；临时会话数据选sessionStorage；大且需查询的选IndexedDB。
另外要强调，任何本地存储都不等于安全存储。不要把明文密码、未加密的令牌写进这些地方。如果必须存，可结合Web Crypto API做一层加密再落盘，降低XSS带来的泄露风险。
| 方案 | 生命周期 | 容量 | 数据类型 |
|---|---|---|---|
| localStorage | 永久 | 约5MB | 字符串 |
| sessionStorage | 标签页会话 | 约5MB | 字符串 |
| IndexedDB | 永久 | 数百MB+ | 结构化任意值 |
理清这些差异后，根据业务场景组合使用，就能用JavaScript稳稳地实现本地存储，既提升体验又避免资源浪费。
localStoragesessionStorageIndexedDB修改时间：2026-08-05 20:45:27