使用单例模式维护整个应用中的数组状态

Mainting the state of array across the entire app using singleton pattern

本文关键字：数组 状态 应用 单例模式 维护      更新时间：2023-09-26
function MySingletonClass(arg) {
  this.arr = [];    
  if ( arguments.callee._singletonInstance )
    return arguments.callee._singletonInstance;
  arguments.callee._singletonInstance = this;    
  this.Foo = function() {
      this.arr.push(arg);
    // ...
  }
}
var a = new MySingletonClass()
var b = MySingletonClass()
Print( a === b ); // prints: true

我的要求是我在每次加载窗口时将对象推送到数组，但是当我打开下一个窗口时，数组的状态不可见。 

var arr = [];
arr.push("something");

它被推了。

当我打开新窗口时，数组的长度再次变为零。

仅使用 JavaScript 是没有办法做到这一点的。JavaScript只是语言。它没有任何指向应用程序，页面甚至浏览器的直接链接。JavaScript 可以在许多其他情况下使用(并且正在使用(，例如在服务器端应用程序中以及作为桌面应用程序的插件语言。

当然，当在浏览器中使用JavaScript时，你确实需要一种与页面上的内容"交流"的方式。为此，您可以使用文档对象模型 (DOM( API，该 API 由每个支持 JavaScript 的浏览器实现。要与浏览器本身进行通信，您可以使用window和其他全局对象。这些有时称为浏览器对象模型(尽管它不是官方 API(。

现在我们知道了;是否有一个 API 允许我们在页面之间维护状态？是的，有。事实上，有几种：

  • HTML5的本地存储
  • 饼干

以这个例子为例，使用localStorage：

// On page 1:
localStorage.setItem("message", "Hello World!");

// On page 2:
var message = localStorage.getItem("message");
if (message !== null) {
    alert(message);
}

很简单，对吧？不幸的是，本地存储只接受键/值对。要保存数组，您需要先将其转换为字符串。您可以执行此操作，例如，使用 JSON：

// On both pages:
var arr = localStorage.getItem("arr");
if (arr === null) {
    arr = [];
} else {
    arr = JSON.parse(arr);
}
function saveArr() {
    localStorage.setItem("arr", JSON.stringify(arr));
}

// On page 1:
console.log(arr); // []
arr.push("Hello");
arr.push("world!");
saveArr();

// On page 2:
console.log(arr); // ["Hello", "world!"]

但请记住，localStorage 和 JSON 都是相当新的，因此只有现代浏览器支持它们。看看使用 cookie 模拟本地存储和 JSON2.js。

要使

数据跨应用程序持久化，必须有一个数据库。 Javascript无法做到这一点，因为它只是客户端，主要是为了呈现用户界面。

相关文章：