当前位置：首页 > web >正文

浏览器存储

web 2025/5/4 15:25:43

浏览器存储技术对比

⭐ 核心特性对比表

特性	Cookie	localStorage	sessionStorage	IndexedDB
存储容量	~4KB	~5MB	~5MB	几百MB甚至无限
生命周期	可设置过期时间	永久保存	会话期间	永久保存
作用域	同源+路径	同源	同源+标签页	同源
服务器通信	自动发送	不发送	不发送	不发送
API复杂度	简单字符串	简单键值对	简单键值对	复杂数据库操作
数据类型	字符串	字符串	字符串	几乎所有JS类型
同步/异步	同步	同步	同步	异步

🌟 详细特性解析

1️⃣ Cookie

// 设置Cookie
document.cookie = "username=张三; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/; domain=example.com; secure; SameSite=Strict";// 读取Cookie
const cookies = document.cookie.split('; ');
const username = cookies.find(cookie => cookie.startsWith('username=')).split('=')[1];

核心特点:

⏱️ 可设置过期时间（expires/max-age）
🔄 每次HTTP请求自动发送到服务器
🔒 可设置HttpOnly防止JavaScript访问
📏 存储容量小（约4KB）
🛣️ 可限制访问路径（path）
🏠 可限制访问域名（domain）
🔐 可设置安全标志（secure, SameSite）

2️⃣ localStorage

// 存储数据
localStorage.setItem('userPreferences', JSON.stringify({theme: 'dark',fontSize: 'large'
}));// 读取数据
const preferences = JSON.parse(localStorage.getItem('userPreferences'));// 删除数据
localStorage.removeItem('userPreferences');// 清空所有数据
localStorage.clear();

核心特点:

🚫 除非手动清除，否则永久存在
📦 较大存储容量（约5MB）
🌐 同源策略限制（协议+域名+端口）
🔒 不随HTTP请求发送到服务器
🔄 同一源下所有标签页/窗口共享数据
🧵 同步API操作（可能阻塞主线程）

3️⃣ sessionStorage

// 存储数据
sessionStorage.setItem('currentSearch', '手机');// 读取数据
const searchTerm = sessionStorage.getItem('currentSearch');// 删除数据
sessionStorage.removeItem('currentSearch');// 清空所有数据
sessionStorage.clear();

核心特点:

⏳ 仅在会话期间有效（关闭标签页即失效）
📦 较大存储容量（约5MB）
🏷️ 标签页隔离（不同标签页不共享）
🌐 同源策略限制
🔒 不随HTTP请求发送到服务器
🧵 同步API操作

4️⃣ IndexedDB

// 打开数据库
const request = indexedDB.open('MyDatabase', 1);// 创建对象仓库
request.onupgradeneeded = function(event) {const db = event.target.result;const store = db.createObjectStore('users', { keyPath: 'id' });store.createIndex('name', 'name', { unique: false });
};// 添加数据
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, email: 'zhangsan@example.com' });transaction.oncomplete = function() {console.log('数据添加成功');};
};// 查询数据
function getUser(id) {const db = // 获取数据库连接const transaction = db.transaction(['users']);const store = transaction.objectStore('users');const request = store.get(id);request.onsuccess = function(event) {console.log('查询结果:', request.result);};
}

核心特点:

📊 支持结构化数据存储（类似NoSQL数据库）
📦 超大存储容量（几百MB甚至更多）
🔍 支持索引和高级查询
🧵 异步API设计（不阻塞主线程）
🌐 同源策略限制
🔒 事务机制确保数据完整性
📱 支持离线存储和同步

💡 适用场景对比

最佳应用场景

Cookie适合:

需要服务器读取的身份验证信息
需要在请求间持久保存的少量数据
需要设置过期时间的数据

localStorage适合:

用户首选项和设置
购物车内容
较大的持久性本地数据
不需要发送到服务器的数据

sessionStorage适合:

单次表单填写数据
临时会话状态
页面间传递一次性数据
需标签页隔离的数据

IndexedDB适合:

大量结构化数据存储
离线Web应用
需要索引和高级查询的数据
文件或Blob存储

🎮 趣味记忆法

Cookie 就像身份证:

随身携带(请求都带着)
容量小(只存必要信息)
有有效期(可设置过期)
特定场合使用(domain/path限制)

localStorage 就像家里的柜子:

永久存在(除非主动清理)
家人共享(同源窗口共享)
不会带出门(不随请求发送)
存储空间较大

sessionStorage 就像口袋:

临时存放(会话结束即清空)
个人专属(不同标签页不共享)
随手可取(简单API)

IndexedDB 就像个人数据库:

海量存储(容量大)
分类整理(索引和结构化)
操作复杂(需要特定方法)
性能强大(支持复杂查询)

📊 存储技术比较示例

同样存储用户信息的不同方式

使用Cookie:

// 存储
document.cookie = "userId=12345; max-age=86400; path=/";
document.cookie = "username=张三; max-age=86400; path=/";// 读取
function getCookie(name) {const cookies = document.cookie.split('; ');const cookie = cookies.find(c => c.startsWith(name + '='));return cookie ? cookie.split('=')[1] : null;
}
const userId = getCookie('userId');

使用localStorage:

// 存储
const user = {id: 12345,name: '张三',preferences: { theme: 'dark' }
};
localStorage.setItem('user', JSON.stringify(user));// 读取
const userData = JSON.parse(localStorage.getItem('user'));

使用sessionStorage:

// 存储 - 仅会话期间有效
sessionStorage.setItem('currentUser', JSON.stringify({id: 12345,name: '张三',loginTime: new Date().toISOString()
}));// 读取
const currentUser = JSON.parse(sessionStorage.getItem('currentUser'));

使用IndexedDB:

// 数据库操作封装
const userDB = {db: null,open() {return new Promise((resolve, reject) => {const request = indexedDB.open('UserDatabase', 1);request.onupgradeneeded = e => {const db = e.target.result;if (!db.objectStoreNames.contains('users')) {db.createObjectStore('users', { keyPath: 'id' });}};request.onsuccess = e => {this.db = e.target.result;resolve(this.db);};request.onerror = e => reject(e.target.error);});},saveUser(user) {return this.open().then(db => {return new Promise((resolve, reject) => {const tx = db.transaction('users', 'readwrite');const store = tx.objectStore('users');store.put(user);tx.oncomplete = () => resolve(user);tx.onerror = e => reject(e.target.error);});});}
};// 使用
userDB.saveUser({id: 12345,name: '张三',email: 'zhangsan@example.com',orders: [{ id: 'order1', items: ['商品1', '商品2'] }]
});