JavaScript 数据存储全攻略：从 Cookie 到 IndexedDB
1. Cookie：传统的轻量级存储
Cookie 是最早的客户端存储解决方案之一，最初设计用于服务器和客户端之间的状态保持。
基本用法
javascript
复制
下载
// 设置cookie document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";// 读取cookie console.log(document.cookie); // 输出所有cookie// 删除cookie（通过设置过期时间为过去） document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
特点
-
存储大小限制：约4KB
-
随每个HTTP请求自动发送到服务器
-
可以设置过期时间
-
同源策略限制
适用场景
-
用户身份验证令牌
-
简单的用户偏好设置
-
需要服务器访问的小数据
2. Web Storage：简单的键值对存储
Web Storage 提供了两种机制：localStorage 和 sessionStorage。
localStorage
javascript
复制
下载
// 存储数据
localStorage.setItem('theme', 'dark');// 读取数据
const theme = localStorage.getItem('theme'); // 'dark'// 删除数据
localStorage.removeItem('theme');// 清空所有数据
localStorage.clear();
sessionStorage
javascript
复制
下载
// 用法与localStorage相同，但只在当前会话有效
sessionStorage.setItem('tempData', 'some value');
特点
-
存储大小：通常5-10MB（各浏览器不同）
-
仅限客户端使用，不会自动发送到服务器
-
localStorage 持久存储，sessionStorage 会话级存储
-
同步操作，可能阻塞主线程
适用场景
-
用户偏好设置（主题、语言等）
-
表单数据临时保存
-
不需要复杂查询的简单数据
3. IndexedDB：强大的客户端数据库
IndexedDB 是一个完整的客户端 NoSQL 数据库系统，适合存储大量结构化数据。
基本用法
javascript
复制
下载
// 打开或创建数据库
const request = indexedDB.open('MyDatabase', 1);request.onupgradeneeded = (event) => {const db = event.target.result;// 创建对象存储（类似于表）const store = db.createObjectStore('books', { keyPath: 'id' });// 创建索引store.createIndex('by_title', 'title', { unique: false });
};request.onsuccess = (event) => {const db = event.target.result;// 添加数据const transaction = db.transaction('books', 'readwrite');const store = transaction.objectStore('books');store.add({ id: 1, title: 'JavaScript高级编程', author: 'Nicholas C. Zakas' });// 查询数据const getRequest = store.get(1);getRequest.onsuccess = () => {console.log(getRequest.result);};
};request.onerror = (event) => {console.error('数据库错误:', event.target.error);
};
特点
-
存储大小：通常为磁盘空间的50%（各浏览器不同）
-
异步操作，不会阻塞UI
-
支持事务、索引和复杂查询
-
学习曲线较陡峭
适用场景
-
离线应用数据存储
-
需要复杂查询的大量数据
-
渐进式Web应用(PWA)
-
需要高性能读写的应用
4. Cache API：网络请求缓存
Cache API 是Service Worker的一部分，主要用于缓存网络请求和响应。
基本用法
javascript
复制
下载
// 打开缓存
caches.open('my-cache').then(cache => {// 添加缓存cache.add('/api/data.json');// 添加多个缓存cache.addAll(['/api/data.json', '/static/logo.png']);// 匹配缓存cache.match('/api/data.json').then(response => {if (response) {console.log('找到缓存:', response);}});
});
特点
-
专门用于网络请求缓存
-
与Service Worker紧密集成
-
支持离线体验
-
可以缓存任何类型的网络响应
适用场景
-
离线Web应用
-
资源缓存加速加载
-
网络请求的缓存策略
5. 其他存储选项
WebSQL (已废弃)
虽然一些浏览器仍支持，但已被W3C废弃，不建议在新项目中使用。
文件系统API
允许Web应用创建和操作本地文件系统，目前仅Chrome支持。
如何选择合适的存储方案？
选择存储方案时，考虑以下因素：
-
数据大小：
-
小数据：Cookie或Web Storage
-
大数据：IndexedDB
-
-
数据结构：
-
简单键值对：Web Storage
-
复杂结构化数据：IndexedDB
-
-
数据持久性：
-
会话级：sessionStorage
-
持久化：localStorage或IndexedDB
-
-
是否需要离线访问：
-
需要：IndexedDB + Cache API
-
不需要：Web Storage可能足够
-
-
性能要求：
-
高性能：IndexedDB（异步）
-
简单操作：Web Storage（同步）
-
最佳实践
-
敏感数据：永远不要在客户端存储敏感信息（如密码、支付信息）
-
清理策略：定期清理过期或无用数据
-
错误处理：所有存储操作都应该有错误处理
-
容量检查：存储前检查可用空间
-
数据加密：必要时对存储数据进行加密
总结
JavaScript 提供了丰富的客户端存储选项，从简单的 Cookie 到功能强大的 IndexedDB。理解每种技术的优缺点和适用场景，可以帮助你为应用选择最合适的存储方案。随着 Progressive Web Apps 的兴起，客户端存储变得越来越重要，掌握这些技术将帮助你构建更强大、更可靠的Web应用。
希望这篇指南能帮助你在项目中做出明智的存储决策！