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

Question

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

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

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

我试图创建一个名为globals.js的文件，在包含以下内容的index.js之前在index.php中引用它：

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。在polyfill的帮助下，您可以在sessionstorage浏览器之前提供IE6支持。

使用SessionStorage优于LocalStorage

的好处

• 会话存储仅保留特定选项卡/窗口的数据，并且当选项卡/窗口关闭时数据将丢失。
• 当数据自动过期时，您无需担心会话过期。
• 您也可以随意使您的会话失效。
• 页面刷新时数据仍然存在。

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

在这里，您可以找到可用于在非支持浏览器中提供sessionstorage支持的polyfill列表：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage

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