如何在 HTML5 中实现应用范围的内存缓存？答案

【问题标题】：How to implement an app wide in-memory cache in HTML5?如何在 HTML5 中实现应用范围的内存缓存？
【发布时间】：2012-04-11 02:39:46
【问题描述】：

有没有办法为 HTML5 Web 应用程序实现应用程序范围的内存缓存？

是否有 HTML5 功能可以在内存中缓存数据？我不是在谈论仅存储服务器响应的浏览器缓存。我需要缓存更高效的对象。

我能想到的一种可能性是实现一个全局单例 JavaScript 对象，该对象将在应用程序的生命周期内创建一次，以便它可以处理缓存和检索数据。如果这是唯一的方法，那么如何创建这样的单例对象？

【问题讨论】：

localStorage 有什么问题？
许多 HTML5 Web 应用程序被设计成只是一个页面，随着应用程序的进行而更新内容。
localStorage 是保存在磁盘上还是在内存中？它是否适用于移动浏览器的总数据大小为 1 MB？我在 Mozilla 链接中找不到此信息。
这里有一个关于iOS上localStorage大小限制的问答：stackoverflow.com/questions/1921048/…
欲知更多关于localStorage、read this的信息。

标签： javascript html caching singleton global-variables

【解决方案1】：

这是一个非常简单的单例，没有太多强制执行。它可以以一种真正受保护的方式完成，外部世界无法真正访问 Cache 构造函数，如果有兴趣，请告诉我。

function Cache() {
     if ("instance" in arguments.callee)
       throw "new instance is not desired";
    var simpleCache = {};

     this.set = function(key, data) {
        simpleCache[key] = data;
     };

     this.get = function(key) {
       return simpleCache[key];
     };  
};

Object.defineProperty(Cache, "instance", { value: new Cache(), writable: false });

现在您可以按预期调用：

Cache.instance.set("key1", { a: "field1Value", b:12 });
Cache.instance.set("key2", new XMLHttpReuquest());

【讨论】：