JavaScript 提供了多种在客户端存储数据的本地存储方案，以下是主要的几种方式：
1. Cookie
- 特点：小型文本数据（最多约4KB），一般是为了辨别用户身份，随HTTP请求自动发送到服务器。
API：
// 设置
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
// 读取
const cookies = document.cookie;
// 删除（设置过期时间为过去时间）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
2. localStorage
- 特点：持久化存储（除非手动清除），同源窗口共享，存储大小通常为5-10MB，只能存储字符串
API：
// 存储
localStorage.setItem('key', 'value');
// 读取
const value = localStorage.getItem('key');
// 删除
localStorage.removeItem('key');
// 清空
localStorage.clear();
3. sessionStorage
- 特点：会话级别存储（关闭标签页后清除），存储大小与localStorage相同
- API：与localStorage相同，只是替换为sessionStorage对象
4. IndexedDB
- 特点：客户端NoSQL数据库，支持大量结构化数据存储（通常50MB以上，浏览器可能提示用户增加配额）
API（较复杂，以下为基本示例）：
// 打开数据库
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 创建对象存储空间
const store = db.createObjectStore('customers', { keyPath: 'id' });
// 创建索引
store.createIndex('name', 'name', { unique: false });
};
request.onsuccess = (event) => {
const db = event.target.result;
// 添加数据
const transaction = db.transaction(['customers'], 'readwrite');
const store = transaction.objectStore('customers');
store.add({ id: 1, name: 'John', email: 'john@example.com' });
};
5. Cache API
- 特点：
caches是浏览器提供的一个全局对象，代表 CacheStorage，它是所有缓存的存储库。通过这个对象，你可以管理和操作不同的缓存。主要用于Service Worker缓存网络请求
API示例：
// 它会尝试打开一个名为 my-cache 的缓存。如果这个缓存已经存在，就直接打开它；
// 如果不存在，就会创建一个新的名为 my-cache 的缓存。
caches.open('my-cache').then(cache => {
// 会尝试从服务器获取 /index.html 这个资源，并将其添加到 my-cache 缓存中
cache.add('/index.html');
cache.add('/style.css');
});
6. File System Access API
- 特点：访问本地文件系统（较新API，支持有限）
API示例：
async function saveFile() {
// 用于显示文件保存对话框，让用户选择文件保存的位置和文件名。
const handle = await window.showSaveFilePicker();
// 用于创建一个可写流（FileSystemWritableFileStream 对象），
// 通过这个可写流可以将数据写入到用户选择的文件中
const writable = await handle.createWritable();
// 将字符串 Hello World 写入到可写流中，进而写入到用户选择的文件里。
await writable.write('Hello World');
// 关闭
await writable.close();
}
选择建议
- 少量简单数据：使用localStorage或sessionStorage
- 需要与服务器通信的数据：使用Cookie
- 大量结构化数据：使用IndexedDB
- 离线应用缓存：使用Cache API
- 需要访问真实文件系统：使用File System Access API
