具有多个文件的JavaScript中的全局变量

Question

我有一个名为index.php的文件。使用脚本标记，它引用index.js.

我还有一个名为payment.php的文件。它带有脚本标记，引用payment.js.

我需要在index.js中设置一个名为seatSelected的变量，然后在payment.js中使用它。但是，我不想在payment.php中引用index.js。

我试着制作一个名为globals.js的文件，在index.php中引用它，然后在index.js中引用，其中包含以下内容：

var selectedSeat;
function setSelectedSeat(seat){
    selectedSeat = seat;
}
function getSelectedSeat(){
    return selectedSeat;
}

并使用设置index.js中的值

setSelectedSeat("test");

在payment.js中接收（在payment.php中引用globals.ks，在payment.js之上）：

alert(getSelectedSeat());

但它提醒"未定义"。我做错什么了吗？如何在不引用更改该变量的文件的情况下引用该变量？

Answer 1

您无法访问从其他页面创建的变量。

您可以使用localStorage和cookies作为后备。

function setSelectedSeat(seat){
    if(localStorage) {
      localStorage['selectedSeat'] = JSON.stringify(seat);
    }
    else {
      //add code to store seat in cookie
    }
}
function getSelectedSeat(){
    if(localStorage) {
      return JSON.parse(localStorage['selectedSeat']);
    }
    else {
      //add code to retrive seat in cookie
    }
}

Answer 2

如果您试图在从一个页面转换到另一个页面时保持变量的状态，并且您的应用程序似乎有需要会话到期的数据，我建议您使用sessionstorage。在polyfills的帮助下，您可以为sessionstorage提供支持，直到IE6浏览器。

使用SessionStorage比使用LocalStorage的好处

• 会话存储仅保留特定选项卡/窗口的数据，并且在选项卡/窗口关闭时数据会丢失
• 由于数据会自动过期，您不必担心会话会过期
• 您也可以随意终止您的会话
• 数据在页面刷新时仍然存在

但请记住，使用sessionstorage，您只能存储字符串key-value模式。您需要使用JSON.stringify和JSON.parse方法将复杂对象存储在浏览器内存中。

在这里，您可以找到一个polyfill列表，可用于在不支持的浏览器中提供会话存储支持：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-存储本地存储和会话存储

您还可以阅读以下文章，以更好地理解sessionstorage和localstorage：http://diveintohtml5.info/storage.html