JS 本地存储的方式及区别

JS 本地缓存主要有以下四种方式：cookie、localStorage、sessionStorage、indexedDB。

Cookie 是「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据，是为了解决 HTTP 无状态的问题。

不超过 4 KB，由名称、值和几个可选属性（有效期、安全性、使用范围等）组成。
每次请求都会被发送到服务器，若不使用 HTTPS 加密很容易被窃取，导致安全风险。
用 document.cookie = '名字=值' 设置；删除方法是给 cookie 设置一个过期时间，过期后浏览器自动删除。
退出页面时把 cookie 的过期时间设为 0，可模拟退出登录。

2. localStorage

HTML5 新方法，IE8 及以上浏览器都兼容。
持久化存储，除非主动 removeItem 或 clear，否则关闭浏览器/重启电脑都不会丢失。
每个源约 5-10 MB。
接口：setItem / getItem / removeItem / clear / key。

localStorage.setItem('name', 'Tom');
localStorage.getItem('name');           // 'Tom'
localStorage.removeItem('name');
localStorage.clear();

3. sessionStorage

用法和 localStorage 基本一致，唯一区别是生命周期：一旦页面（会话）关闭，sessionStorage 就会删除数据。
适用于保存临时表单数据、单页路由的临时状态等。

4. indexedDB

IndexedDB 是浏览器提供的本地数据库：

可被网页脚本创建和操作，允许存储大量数据，提供查找接口和索引。
不属于关系型数据库（不支持 SQL），更接近 NoSQL。
适合桌面应用、Progressive Web App（PWA）、Chrome 扩展组件等需要存储大量数据的场景。

典型操作步骤：

创建/打开数据库。
在数据库中创建对象仓库（object store）。
启动事务，发送请求执行增删改查。
监听正确的 DOM 事件，等待操作完成。
在结果上做后续处理。

// 打开数据库
const request = indexedDB.open('MyTestDatabase');

request.onerror = (e) => { console.log('打开数据库报错'); };
request.onsuccess = (e) => { const db = e.target.result; };

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('imgLists')) {
    const store = db.createObjectStore('imgLists', { keyPath: 'id' });
    store.createIndex('name', 'name', { unique: false });
  }
};

// 增删改查示例
db.transaction(['imgLists'], 'readwrite')
  .objectStore('imgLists')
  .add({ id: 1, name: 'a', path: '/x.png' });

db.transaction(['imgLists'], 'readwrite')
  .objectStore('imgLists')
  .delete(1);

5. 四种方式对比

维度	cookie	localStorage	sessionStorage	indexedDB
大小	~4KB	5-10MB	5-10MB	几百 MB 甚至更多
生命周期	可设置	永久	会话结束	永久（可手动清）
与服务器通信	每次请求都带	否	否	否
API 易用性	字符串操作繁琐	简单	简单	相对繁琐
适用	登录态、用户偏好	长期偏好	临时数据	大量结构化数据