在前端开发中，有时需要将一些数据保存在客户端的 cookie 中。然而，由于 cookie 只能存储字符串类型的数据，我们需要将对象序列化为字符串再存储。本文将介绍如何使用纯 JavaScript 技术将对象存储在 cookie 中，并提供一个示例代码。
1. 序列化和反序列化
JavaScript 提供了两个方法，用于将对象序列化和反序列化成字符串：
JSON.stringify(obj)：将 JavaScript 对象转换为 JSON 字符串。JSON.parse(str)：将 JSON 字符串转换为 JavaScript 对象。
这两个方法非常方便，可以帮助我们将对象转换为字符串后存储到 cookie 中，并在需要时将其重新转换为 JavaScript 对象。
2. 存储对象到 cookie
要将对象存储在 cookie 中，我们需要执行以下步骤：
- 使用
JSON.stringify方法将对象转换为字符串。 - 使用
encodeURIComponent方法对字符串进行编码，以便在 cookie 中正确存储。 - 将编码后的字符串赋值给 cookie 的值属性。
- 设置 cookie 的过期时间或过期日期。
下面是一个示例函数，它接受一个对象和一个可选的过期时间（单位为秒），并将该对象存储为 cookie：
-- -------------------- ---- -------
-------- --------------- ---- -------------- -
--- ------- - ---
-- --------------- -
--- ---- - --- -------
--------------------------- - ------------- - ------
------- - -- --------- - -------------------
-
--- -------------- - --------------------
--- ---------- - -----------------------------------
--------------- - ---- - --- - ---------- - ------- - -- --------
-3. 从 cookie 中读取对象
要从 cookie 中读取存储的对象，我们需要执行以下步骤：
- 使用
decodeURIComponent方法对 cookie 的值进行解码。 - 使用
JSON.parse方法将字符串转换为 JavaScript 对象。
下面是一个示例函数，它接受一个 cookie 名称，并返回该 cookie 存储的对象。如果找不到该 cookie，则返回 null：
-- -------------------- ---- -------
-------- --------------- -
--- ------------- - ------------------------------------
--- ------- - ---------------------- ---
--- ---- - - -- - - --------------- ---- -
--- ------ - -----------
--- ----------- - ------------------
--- ---------- - ---------------
--- ----------- - ---------------
-- ----------- --- ----- -
--- ---------- - --------------------------------
--- --- - -----------------------
------ ----
-
-
------ -----
-4. 示例代码
下面是一个完整的示例，它演示了如何使用上述函数将对象存储在 cookie 中，并从 cookie 中读取该对象：
-- -------------------- ---- ------- --- ---- - - ----- -------- ---- --- ------ ------------------- -- ----------------- ----- ------ -- -- ---- --- ----------- - -- --- ---------- - ------------------ -- - ------ ------ ---- -- ----------------------------- -- -- ------- ---------------------------- -- -- -- ------------------------------ -- -- -------------------
5. 总结
在本文中，我们介绍了如何使用纯 JavaScript 技术将对象存储在客户端的 cookie 中。通过序列化和反序列化 JavaScript 对象，我们可以轻松地将复杂的数据类型存储在 cookie 中。这对于需要在不同页面之间共享数据的应用程序非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29106