Javascript 全局站点变量js

我是javascript新手，我正在尝试创建一个包含两个HTML页面（a和B）和一个全局js文件的小型站点

假设我在A页中选择了某些项目，A页上的列表预览会得到更新。 但是，如果我想详细查看列表，我必须转到B页

页面A和B位使用相同的.js文件，所选项目保存在一个数组中

如何确保所选项目仍保留在数组中，并且在从A页转到B页时不会刷新数组

我想到的是

var selectedProductsName = new Array();

在OwnJS.js中 将项目添加到预览列表可以正常工作。

---

当我从A页转到B页时，我只是在努力保持数组不被刷新。

HTML5引入了一种称为

localStorage

的新东西。它基本上是一种在网站的所有页面之间以及在用户会话之间持久化的存储。它可以作为简单的键/值存储访问：

var selectedProductsName = localStorage.getItem("selectedProductsName");

并设定：

localStorage.setItem("selectedProductsName", []);

---

，如果您希望能够执行更多操作，如检查

localStorage

的浏览器兼容性以及观看

storage

事件等。

您可以使用HTML5本地存储。它允许您告诉浏览器在用户的机器上保存数据。（还有会话存储，仅对当前会话有效。） 保存（在Apply.html中）

检索（在personal_Info.html中）

源页面 源页面有一个带有jQuery Click事件处理程序的HTML按钮。单击按钮时，名称文本框和技术DropDownList的值被设置为QueryString参数，然后页面被重定向到目标页面（Page2.htm）

$（函数（）{
$（“#bquerystring”）.bind（“单击”，函数（）{
var url=“Page2.htm？name=“+encodeURIComponent（$（“#txtName”）.val（））+”&technology=“+encodeURIComponent（$（“#ddltechnology”）.val（））；
window.location.href=url；
});
});

目标页面 在目标页面（Page2.htm）上，在jQuery页面加载事件处理程序中，首先检查页面的URL，以确定是否接收到一些QueryString参数，这是通过检查window.location.search属性来完成的。如果它有一些QueryString参数，则执行循环，并将每个QueryString键和值对插入到数组中，最后使用HTML跨度在页面上显示值

<script type="text/javascript">
    var queryString = new Array();
    $(function () {
        if (queryString.length == 0) {
            if (window.location.search.split('?').length > 1) {
                var params = window.location.search.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var key = params[i].split('=')[0];
                    var value = decodeURIComponent(params[i].split('=')[1]);
                    queryString[key] = value;
                }
            }
        }
        if (queryString["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            $("#lblData").html(data);
        }
    });
</script>

var queryString=新数组（）；
$（函数（）{
if（queryString.length==0）{
if（window.location.search.split（“？”）.length>1）{
var params=window.location.search.split（'？'）[1]。split（'&'）；
对于（变量i=0；i
”；
数据+=“名称：”+queryString[“名称”]+“技术：”+queryString[“技术”]；
$（“#lblData”）.html（数据）；
}
});

你不能。加载每个页面时，该JS文件将被重新加载，因此数组将被重置。您可以将信息存储在

localStorage

或

sessionStorage

中以将其持久化，或使用后端。另一个选项是序列化数组并将其放入隐藏字段（对于不支持localStorage和sessionStorage的浏览器），我还必须将其定义为数组（）吗？请使用数组文本（

[]查看此项

）与

新的

关键字。基本上，它更倾向于在

new

关键字上使用literal

[]

（对于对象：

{}

）。如果我想使用ArrayStation，我就必须使用JSON.stringify（）和JSON.parse（），这应该没问题，除非您将函数存储在数组中（如果您试图将函数保存到

localStorage

，那就太可惜了）。

// retrieve first name from local storage
var firstName = localStorage["firstName"];
if (firstName !== undefined) {
    $("#textfield1").attr(value, firstName);
}

<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
    $(function () {
        $("#btnQueryString").bind("click", function () {
            var url = "Page2.htm?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
            window.location.href = url;
        });
    });
</script>

<script type="text/javascript">
    var queryString = new Array();
    $(function () {
        if (queryString.length == 0) {
            if (window.location.search.split('?').length > 1) {
                var params = window.location.search.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var key = params[i].split('=')[0];
                    var value = decodeURIComponent(params[i].split('=')[1]);
                    queryString[key] = value;
                }
            }
        }
        if (queryString["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            $("#lblData").html(data);
        }
    });
</script>