JavaScript本地存储主要用Web Storage（localStorage永久、sessionStorage临时）和IndexedDB（高容量结构化数据库），辅以Cookies、Cache API等；选择依数据量、生命周期和功能需求而定。
JavaScript 实现本地存储主要依靠浏览器提供的 Web Storage API 和 IndexedDB API，它们允许网页在用户设备上持久或临时保存数据，无需依赖服务器。
Web Storage（localStorage 和 sessionStorage）
这是最常用、最简单的本地存储方式，以键值对（字符串）形式保存数据。
-
localStorage：数据永久保存，除非手动清除（如调用
localStorage.clear()或用户删除浏览器数据），关闭标签页或重启浏览器也不丢失。 - sessionStorage：仅在当前浏览器标签页生命周期内有效，关闭该标签页即自动清空，适合临时会话数据（如表单草稿、导航状态）。
两者都只能存字符串，若需存对象或数组，需配合 JSON.stringify() 和 JSON.parse()：
localStorage.setItem('user', JSON.stringify({ name: '张三', age: 28 }));
const user = JSON.parse(localStorage.getItem('user'));
IndexedDB（结构化、高容量本地数据库）
IndexedDB 是一个低级、异步、事务型的客户端数据库，适合存储大量结构化数据（如文件、图片 Blob、复杂对象），支持索引、查询和游标遍历。
立即学习“Java免费学习笔记（深入）”；
- 容量远大于 localStorage（通常可达数百 MB，具体取决于浏览器和磁盘空间）。
- 所有操作基于请求对象（
IDBRequest），通过事件（onsuccess/onerror）或 Promise 包装（如使用idb库）处理结果。 - 需要先打开数据库、创建 objectStore（类似表）、再增删改查。
原生使用较繁琐，推荐搭配轻量封装库如 idb 简化操作：
import { openDB } from 'idb';
const db = await openDB('myapp', 1, {
upgrade(db) {
db.createObjectStore('notes', { keyPath: 'id' });
}
});
await db.put('notes', { id: 1, content: '今天要开会' });
其他补充 API（按场景选用）
Cookies：可通过 document.cookie 读写，但容量小（约 4KB）、每次 HTTP 请求自动携带，已不推荐用于纯前端存储；适合身份凭证等需服务端参与的场景。
Cache API：配合 Service Worker 使用，主要用于离线资源缓存（HTML/CSS/JS/图片等），不是通用数据存储接口。
File System Access API（实验性）：允许网页直接读写用户本地文件系统（需用户主动授权），适用于编辑器、音视频工具等重型 PWA 应用，目前仅 Chromium 系浏览器支持且默认受限。
兼容性与选择建议
localStorage/sessionStorage 兼容所有现代浏览器（包括 IE8+）；IndexedDB 在 Chrome/Firefox/Safari/Edge 均有良好支持（Safari 从 iOS 14.4+ 开始稳定支持）。
- 存少量配置、用户偏好 → 用
localStorage - 存单页内临时状态 → 用
sessionStorage - 需存大量数据、支持搜索/索引/离线同步 → 选
IndexedDB - 需跨域共享或服务端校验 → 考虑 Cookie + 后端配合
