JavaScript本地存储是Web前端实现数据持久化的重要手段，能够让数据在页面刷新、浏览器关闭后依然保留，避免每次都需要从服务端重新获取基础数据。目前主流的本地存储方案各有优缺点，适用场景也存在明显区别。
常见JavaScript本地存储方案
1. Cookie
Cookie是最早期的本地存储方案，原本设计用于服务端和客户端的状态保持，也可用于存储少量数据。它的存储容量很小，通常单个Cookie不超过4KB，且有数量限制。Cookie会在每次HTTP请求中自动携带，会影响请求性能，同时可以设置过期时间，支持跨子域访问。
使用示例：
// 设置Cookie，有效期7天
function setCookie(name, value, days) {
let expires = '';
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toUTCString();
}
document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
}
// 获取Cookie
function getCookie(name) {
const nameEQ = name + '=';
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
// 删除Cookie
function deleteCookie(name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
}
2. localStorage
localStorage是HTML5引入的本地存储方案，属于Web Storage API的一部分，存储容量通常在5MB左右，数据永久存储，除非手动删除。它仅在客户端保存，不会随请求发送到服务端，API简单易用，仅支持存储字符串类型的数据。
使用示例：
// 存储数据
localStorage.setItem('username', '张三');
// 存储对象需要先序列化
const user = { id: 1, age: 20 };
localStorage.setItem('userInfo', JSON.stringify(user));
// 读取数据
const name = localStorage.getItem('username');
const userInfo = JSON.parse(localStorage.getItem('userInfo'));
// 删除单个数据
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();
3. sessionStorage
sessionStorage和localStorage同属Web Storage API，区别在于sessionStorage的存储周期仅在当前浏览器标签页会话内，关闭标签页后数据会自动清除。它的存储容量和localStorage一致，API操作方式也完全相同。
使用示例：
// 存储当前会话的临时数据
sessionStorage.setItem('tempToken', 'abc123');
// 读取数据
const token = sessionStorage.getItem('tempToken');
// 关闭标签页后该数据会自动消失
4. IndexedDB
IndexedDB是浏览器提供的本地数据库存储方案，属于非关系型数据库，存储容量几乎没有限制，支持存储大量结构化数据，包括字符串、二进制数据等。它支持事务、索引查询，操作是异步的，API相对复杂。
使用示例：
// 打开或创建数据库
const request = indexedDB.open('testDB', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
// 创建对象存储空间，设置主键为id
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
request.onsuccess = function(event) {
const db = event.target.result;
// 开启事务，写入数据
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: '李四', age: 25 });
transaction.oncomplete = function() {
console.log('数据写入成功');
};
};
request.onerror = function(event) {
console.log('数据库打开失败');
};
各方案特性对比
| 方案 | 存储容量 | 数据时效性 | 是否随请求发送 | API复杂度 |
|---|---|---|---|---|
| Cookie | 约4KB | 可设置过期时间 | 是 | 低 |
| localStorage | 约5MB | 永久存储 | 否 | 低 |
| sessionStorage | 约5MB | 标签页会话内 | 否 | 低 |
| IndexedDB | 无明确限制 | 永久存储 | 否 | 高 |
如何选择适合的存储方案
- 如果需要存储少量和请求认证相关的数据，且需要随请求发送到服务端，优先选择
Cookie。 - 如果需要存储中等大小的字符串数据，且希望数据永久保留，不需要复杂查询，选择
localStorage。 - 如果存储的是当前会话的临时数据，关闭标签页后不需要保留，选择
sessionStorage。 - 如果需要存储大量结构化数据，或者需要支持复杂查询、存储二进制数据，选择
IndexedDB。
需要注意的是，本地存储的数据都在客户端，不能存储敏感信息如用户密码，同时部分浏览器可能会在无痕模式下限制本地存储的使用，开发时需要根据实际情况做兼容处理。
JavaScript本地存储数据持久化localStorageIndexedDB修改时间：2026-06-22 03:36:35