细说localStorage, sessionStorage, Cookie, Session

阅读时长 4 分钟读完

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 被删除。
  • 可以跨页面、跨窗口访问。

示例代码:

-- -------------------- ---- -------
-- ------- --- -------
----- ------- - -------------------
----- ------- - ---------------------------
----- --- - ----------
-----------------
  ------- ------------ -- ------- ------- --
  ------- ------ -- ----------- -------
  ------------------ ----- -- ----------- -------
  ------- - ------- ----- - -- ------- -----
----

------------ -----

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈