javascript - 尝试在 2 个 HTML 文件之间共享的 JS 文件内使用全局数组，但失败

Question

所以我有一个 HTML 页面，其中包含一堆供用户填写的表单元素。我将用户所做的所有选择推送到我唯一的 Javascript 文件中的一个全局变量 allTheData[] 中。

然后我有第二个 HTML 页面，该页面在用户单击按钮后加载。该 HTML 页面应该获取 allTheData 数组内的一些数据并显示它。我正在调用该函数来显示 allTheData，方法是:

window.onload = function () {
    if (window.location.href.indexOf('Two') > -1) {
        carousel();
    }
}

function carousel() {
    console.log("oh");
    alert(allTheData.toString());
}

但是，我发现第二个 HTML 页面中没有显示任何内容，并且 allTheData 数组似乎为空，尽管它之前在第一个 HTML 页面中已填写。我非常有信心我正确地将数据推送到 allTheData 数组中，因为当我仍在第一个 HTML 页面中使用alert(allTheData.toString()) 时，所有数据都会显示。

我认为在从第一个 HTML 页面过渡到第二个 HTML 页面期间发生了一些事情，导致 allTheData 数组为空或其他原因，但我不确定它是什么。请帮助新手!

Answer 1

Web 存储:这听起来像是 window.sessionStorage 对象的工作，它与它的表兄弟 window.localStorage 一起允许数据 - as-string 保存在用户浏览器中，以便在同一域的各个页面上使用。

但是，请记住，它们都是类似 Cookie 的功能，因此它们的有效性取决于用户对每个域的 Cookie 偏好。

一个简单的条件将确定网络存储选项是否可用，就像这样......

if (window.sessionStorage) {
   // continue with app ...
} else {
   // inform user about web storage
   // and ask them to accept Cookies
   // before reloading the page (or whatever)
}

保存到网络存储以及从网络存储中检索需要在 String 数据类型之间进行转换，通常通过像这样的 JSON 方法...

// save to...
var array = ['item0', 'item1', 2, 3, 'IV'];
sessionStorage.myApp = JSON.stringify(array);

// retrieve from...
var array = JSON.parse(sessionStorage.myApp);

还有比这些更具体的方法。更多详细信息和兼容性表等参见 Using the Web Storage API @ MDN .

希望有帮助。 :)