【浏览器】本地存储

本地存储是一种可以在浏览器中存储数据的机制。

1. localStorage

• LocalStorage 可以存储较⼤量的数据，数据保存在浏览器本地且不会过期，关闭浏览器也会存在，除⾮⼿动删除或清除缓存。
• 应⽤场景：适⽤于存储⽤户个性化数据、本地数据缓存等。

// 存储数据     
localStorage.setItem('key', 'value');    
// 获取数据     
const value = localStorage.getItem('key');     
// 删除数据     
localStorage.removeItem('key');     
// 清除所有数据     
localStorage.clear();     

2. sessionStorage

• sessionStorage 仅在当前会话（当前浏览器标签页或窗口）中保留数据，在关闭会话后数据会被清除。

• 应⽤场景：适⽤于需要短期保存数据的场景，如表单数据暂存、⻚⾯数据缓存等。

 // 存储数据     
 sessionStorage.setItem('key', 'value');     
 // 获取数据     
 const value = sessionStorage.getItem('key');    
 // 删除数据     
 sessionStorage.removeItem('key');     
 // 清除所有数据     
 sessionStorage.clear(); 

3. cookie

• Cookie 是浏览器中最古⽼的本地存储⽅式，它可以存储少量的⽂本数据，并在之后的 HTTP 请求中⾃动携带发送给服务器。
• Cookie 可以设置过期时间，也可以设置作⽤域（只在特定域名或路径下有效）。
• 应⽤场景：⼀般⽤于存储会话信息、⽤户偏好设置等少量的⽂本数据。
• 浏览器限制 cookie 的⼤⼩最⼤为4kb，特定域允许的 cookie 数量为 20 个，并且只能包含字符串；cookie 的操作是同步的；
• 不能通过 web workers 来访问，但可以通过全局 window 对象访问。

4. IndexedDB

• IndexedDB 是⼀个本地数据库存储⽅案，可以存储⼤量结构化数据，类似于 nosql，⽀持事务处理和索引查找，功能⽐较强⼤。每个域⾄少有 1GB 的可⽤空间，并且最多可以达到剩余磁盘空间的 60%。
• 应⽤场景：适⽤于需要离线存储数据、本地数据库操作等。
• IndexedDB API 是异步的，不会在数据加载时停⽌⻚⾯的渲染。可以存储结构化数据，例如 Date、视频、图像对象等。 ⽀持数据库事务和版本控制。 可以存储⼤量数据。 可以在⼤量数据中快速定位/搜索数据。 数据库是域专⽤的，因此任何其他站点都⽆法访问其他⽹站的 IndexedDB 存储，这也称为同源策略。