JavaScript 中的本地存储方式及其应用场景概述

在 JavaScript 中，本地存储指的是将数据保存在用户的浏览器中，能够在页面刷新或关闭后仍然保留。常见的本地存储方式有以下几种：

1. Cookie
2. LocalStorage
3. SessionStorage
4. IndexedDB
5. WebSQL（已废弃）

每种存储方式的特点、区别及应用场景如下：

1. Cookie

特点：

• 大小限制：每个 cookie 通常限制为 4KB 左右，因浏览器不同有所差异。
• 数据类型：只能存储字符串，其他类型需通过序列化转换。
• 有效期：可以设置有效期，默认为会话期（浏览器关闭时删除）。
• 安全性：数据默认以明文形式存储，容易被篡改或窃取，支持 HttpOnly 和 Secure 标志以提高安全性。
• 跨域支持：可以在同一域名的多个页面之间共享。
• 通信开销：每次 HTTP 请求都会携带 cookie，增加了请求的大小和通信开销。

应用场景：

• 用户身份验证：用于存储用户登录状态的会话信息（如 session_id）。
• 跨页面数据共享：在多个页面之间共享少量数据，如用户偏好设置。
• 跟踪用户行为：第三方广告商或分析服务通过 cookie 跟踪用户浏览行为。

使用示例：

// 设置 Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 9999 23:59:59 GMT";

// 读取 Cookie
const cookies = document.cookie; // "username=John"

2. LocalStorage

特点：

• 大小限制：通常为 5MB 左右（每个域名）。
• 数据类型：只能存储字符串，需使用 JSON.stringify() 和 JSON.parse() 序列化和反序列化复杂数据。
• 持久性：数据持久存储，除非手动删除或清除浏览器缓存，否则不会过期。
• 作用域：数据在同一域名下的所有页面共享，无法跨域。
• 不会自动发送：与 HTTP 请求无关，不会自动传送到服务器。

应用场景：

• 持久化数据存储：用户的应用设置、首选项等需要长期保存的数据。
• 离线存储：存储一些离线数据，