如何在多个页面之间保留JavaScript变量？

Question

有没有一种方法可以在不同的页面之间存储 JavaScript 变量？比如，在页面 A 中，我设置了 window.someVar = 5。然后通过在 A 中点击超链接移动到页面 B，并执行像 alert(window.someVar) 这样的操作——我应该能够得到一个显示 5 的消息框。是否有一种技术可以将 someVar 持久化呢？

- deostroll

---

看一下这个答案：如何在JavaScript中从一个文件发送变量到另一个文件？ - jherax

你也可以在这里找到完整的答案：https://dev59.com/0F0a5IYBdhLWcg3wva56#30070207 - jherax

被接受的答案绝对需要更改。目前，存储API是持久化值的标准。window.name方法已经过时。 - Sebastian Simon

是的，有这样的东西，它们被称为 JavaScript cookies。 - lofihelsinki

Answer 1

你可以使用窗口的名称 window.name 来存储信息。这被称为JavaScript 会话。但它只在同一窗口/标签页中有效。

- Gumbo

---

@AndersonGreen 存储绑定到实际的窗口/选项卡。如果窗口/选项卡关闭，则数据将丢失。如果您正在寻找更持久的解决方案，请查看CMS的答案。像Web存储这样的技术具有不同的范围。 - Gumbo

@AndersonGreen 是的，这是可能的。URI 的片段可以通过 location.hash 访问。 - Gumbo

它对我不起作用。浏览器显示“sessvars.newObj未定义”。 - user586399

它对我也不起作用。即使我看到这个页面http://www.thomasfrank.se/sessvarsTestPage1.html正常工作，并且使用的是与我相同的js文件。不知道为什么。 - Jack

有一些讨论称，由于任何网站都可以读取其他网站设置的window.name，因此Firefox至少会弃用window.name，以减少安全风险。我想知道是否有更安全的方法？ - Edge

Answer 2

为了完整起见，还应该研究HTML5的本地存储能力和sessionStorage。这些在所有现代浏览器的最新版本中都得到支持，使用起来比cookie更容易且不容易出错。

http://www.w3.org/TR/2009/WD-webstorage-20091222/

https://www.w3.org/TR/webstorage/（第二版）

以下是一些使用sessionStorage和localStorage设置和获取值的示例代码：

 // HTML5 session Storage
 sessionStorage.setItem("variableName","test");
 sessionStorage.getItem("variableName");


//HTML5 local storage 
localStorage.setItem("variableName","Text");
// Receiving the data:
localStorage.getItem("variableName");

- Andy Hume

---

实施参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Storage - 0xc0de

浏览器支持：http://caniuse.com/#search=sessionStorage。 - Chris Martin

嗯，MDN声称sessionStorage在IE8上可以使用，但是caniuse则要求IE11以上版本。 - icc97

Answer 3

我建议您看一下这个库：

• PersistJS

我非常喜欢它，它支持从cookie到HTML5存储、Gears、Flash等多种存储后端，使用起来非常透明，您无需知道或关心使用了哪个后端，该库会根据浏览器的能力选择正确的存储后端。

- Christian C. Salvadó

---

它能存储大对象吗？例如窗口对象。 - Mohsin Sheikh Khalid

它能存储具有循环引用的对象吗？例如弹出窗口对象？或者像HTML5文件API文件对象这样的本地对象？ - Prakhar Mishra

@MohsinSheikhKhalid 这个链接已经过时了，需要更新一下。http://pablotron.org/?cid=1557 - Mirko Cianfarani

链接已过期..因为正在迁移..您可以更新它吗？@CMS - Mirko Cianfarani

Answer 4

是的，可以使用Cookies实现。但要小心，不要放太多内容（我认为有4kb的限制）。但是一些变量是可以的。

如果需要存储的数据量远大于此，请查看@Annie在另一个答案中提供的绝佳技巧。对于小规模数据存储，我会说Cookies是最简单的东西。

请注意，Cookies被存储在客户端。

- Pekka

---

Cookie的另一个缺点是，它们会随着每个HTTP请求一起发送到创建它们的域中，即使是像图片这样的静态内容也是如此。 - Christian C. Salvadó

Answer 5

您可以使用HTML5存储、Flash存储或Gears来持久化值。 dojo storage库为此提供了一个不错的封装。

- Annie

---

更新的链接 - https://dojotoolkit.org/reference-guide/1.10/dojo/store.html - roshnet

Answer 6

我推荐使用web storage。示例：

// 存储数据： localStorage.setItem("变量名","文本"); // 获取数据： localStorage.getItem("变量名");

只需将变量名替换为您的变量名称，将文本替换为您想要存储的内容。根据W3Schools的说法，它比cookies更好。

- ElectroBit

---

这仅适用于单个域，不能跨多个域使用。在我的情况下没有太多用处。 - Masud Rahman

@MasudRahman，您还可以使用嵌入式iframe和使用postMessage()来在不同的域之间持久化变量。 - Anderson Green