细说 localStorage, sessionStorage, Cookie 和 Session
Web 前端开发中，常常需要使用存储机制来保存和读取数据。其中比较常用的有四种：localStorage、sessionStorage、Cookie 和 Session。本文将对这四种存储方式进行详细介绍，并给出示例代码。
localStorage
localStorage 是 HTML5 中新增的 API，用于在浏览器端永久地存储字符串类型的键值对数据。它可以用于存储用户的个人设置、历史记录等信息。
特点：
- 永久保存，除非手动清空。
- 可以跨页面、跨窗口访问。
- 存储容量一般为 5MB 左右。
示例代码：
-- -- ------------ ---------------------------- ------- -- -- ------------ ----- ---- - ----------------------------- ------------------ -- -- ----- -- -- ------------ --------------------------------
sessionStorage
sessionStorage 也是 HTML5 中新增的 API，与 localStorage 类似，但其只在当前会话中有效，即关闭浏览器或标签页后数据就被删除。它可以用于存储临时数据，如登录状态等。
特点：
- 仅在当前会话有效，关闭浏览器或标签页后数据被删除。
- 可以跨页面、跨窗口访问。
- 存储容量一般为 5MB 左右。
示例代码：
-- -- -------------- ------------------------------ ------- -- -- -------------- ----- ---- - ------------------------------- ------------------ -- -- ----- -- -- -------------- ----------------------------------
Cookie
Cookie 是浏览器中的一小段文本信息，由服务器生成，发送给客户端并保存在浏览器中。下次请求时，浏览器会自动将该 Cookie 发送给服务器。它可以用于存储用户的登录状态、购物车等信息。
特点：
- 可以设置过期时间，在过期时间之前有效。
- 存储容量有限，一般为 4KB 左右。
- 可以跨域名、跨路径访问。
示例代码：
-- -- ------
--------------- - ---------- ------------ -- --- ---- -------- ---- --------
-- -- ------
----- ------- - ------------------------ ---
--- ---- - - -- - - --------------- ---- -
----- -- - ----------------------
-- ------ --- ------- -
------------------- -- -- -----
------
-
-
-- -- ------
--------------- - ------- ------------ -- --- ---- -------- ---- --------Session
Session 是一个服务器端的概念，用于存储用户状态。当用户第一次访问网站时，服务器会为其创建一个唯一的 session ID，并将其发送给客户端（一般通过 Cookie）。之后，客户端每次请求都会带上该 session ID，服务器通过该 ID 找到对应的 session，并读取或保存其中的数据。
特点：
- 由服务器控制，存储容量没有限制。
- 只在当前会话中有效，关闭浏览器或标签页后 session 被删除。
- 可以跨页面、跨窗口访问。
示例代码：
-- ------- --- ------- ----- ------- - ------------------- ----- ------- - --------------------------- ----- --- - ---------- ----------------- ------- ------------ -- ------- ------- -- ------- ------ -- ----------- ------- ------------------ ----- -- ----------- ------- ------- - ------- ----- - -- ------- ----- ---- ------------ ----- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------