前端存储方案

在浏览器端，JavaScript 提供了多种存储方式，主要包括以下几种：

Cookies

• 通过 document.cookie 进行读写。
• 可以设置过期时间。设置过期时间后根据 domain 等配置项可以实现多会话、持久化使用，如果不设置过期时间，会在会话关闭后清除。
• 容量一般不超过 4K。
• 只能存储字符串。
• 主要用于会话管理，如登录状态、个人设置等。

优缺点

• 优点：可以设置过期时间；服务器和客户端都可以读写；可以通过 httpOnly 等配置项提升数据安全。
• 缺点：容量有限；可以被禁用。

localStorage

• 通过 localStorage.setItem() 等方法使用。
• 无法设置过期时间，数据存储是是持久化的，需要手动清除。
• 容量限制一般是 5M。
• 只能存储字符串。
• 主要用于存储用户的持久化数据，如主题设置、偏好设置等。

优缺点

• 优点：数据持久化，不会因为刷新或关闭丢失数据；容量相对较大。
• 缺点：需要手动删除数据。

sessionStorage

• 通过 sessionStorage.setItem() 等方法使用。
• 无法设置过期时间，数据只能在当前会话中使用。
• 容量限制一般是 5M。
• 只能存储字符串。
• 用于存储与当前会话有关的数据。

优缺点

• 优点：会话结束后自动清理，无需手动管理；容量相对较大。
• 缺点：数据无法持久化存储。

IndexedDB

• 通过创建数据库、对象存储、索引以及使用事务来操作数据。
• 数据是持久的，且在单一站点内有效。
• 容量通常没有限制，取决于浏览器或客户端的存储能力。
• 支持字符串、数字、二进制数据以及可以被结构化克隆算法处理的任何类型（如 Date、RegExp 等）。
• 用于存储大量结构化数据，并提供高效的索引和查询机制。

优缺点

• 优点：支持大量数据存储；支持丰富的数据类型。
• 缺点：使用起来比较复杂。