跨页面持久化JavaScript变量？[重复]-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会遇到需要在不同页面之间共享数据的情况。而JavaScript变量通常只能在同一页面内进行传递，因此需要找到一种跨页面持久化JavaScript变量的方法。本文将介绍两种常见的实现方式，并提供示例代码以供参考。

方式一：使用Cookie

Cookie是一种在浏览器端存储数据的机制，可以通过设置Cookie来在不同页面间传递数据。具体实现方法如下：

在页面A中设置Cookie：
```
document.cookie = "variable_name=variable_value";
```
其中variable_name是要设置的变量名，variable_value是要设置的变量值。

在页面B中读取Cookie：

var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
  var cookie = cookies[i].trim();
  if (cookie.indexOf("variable_name=") == 0) {
    var variable_value = cookie.substring("variable_name=".length, cookie.length);
  }
}

遍历所有Cookie，找到名为variable_name的Cookie，并取出其中的值作为变量值。

需要注意的是，Cookie有大小限制（通常为4KB左右），如果要传递的数据较大，可能会导致传递失败。

方式二：使用LocalStorage

LocalStorage是HTML5中新增的一种客户端存储机制，可以在浏览器端永久保存数据。与Cookie相比，LocalStorage的容量更大（通常为5MB左右），而且不会随着HTTP请求发送到服务器端，因此更适合用于跨页面传递数据。

具体实现方法如下：

在页面A中设置LocalStorage：

localStorage.setItem("variable_name", "variable_value");

在页面B中读取LocalStorage：

var variable_value = localStorage.getItem("variable_name");

需要注意的是，LocalStorage只能存储字符串类型的数据，如果要存储其他类型的数据，需要将其序列化成字符串再存储，并在读取时反序列化。

总结

本文介绍了两种常见的跨页面持久化JavaScript变量的方法：使用Cookie和使用LocalStorage。两种方法各有优缺点，具体使用时需要根据需求进行选择。同时，在实际开发中还可以结合后端技术，如Session和数据库等，来完成数据的持久化和共享。

示例代码如下：

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

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

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

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

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/10842