javascript - HTML5 本地存储回退解决方案

标签 javascript jquery flash html local-storage

<分区>

我正在寻找可以在没有 native 支持的浏览器上模拟 localStorage 的 javascript 库和代码。

基本上,我想使用 localStorage 对我的网站进行编码以存储数据,并且知道它仍然可以在本身不支持它的浏览器上运行。这意味着库会检测 window.localStorage 是否存在并在存在时使用它。如果它不存在,那么它将通过在 window.localStorage 命名空间中创建自己的实现来创建某种本地存储的后备方法。

到目前为止,我已经找到了这些解决方案:

  1. 简单 sessionStorage实现。
  2. 一个实现 that uses cookies (对这个想法不感兴趣)。
  3. Dojo 的 dojox.storage ,但这是它自己的事情,而不是真正的后备。

我知道 Flash 和 Silverlight 也可以用于本地存储,但还没有找到任何关于将它们用作标准 HTML5 localStorage 的后备方案的信息。也许 Google Gears 也有这种能力?

请分享您找到的任何相关库、资源或代码片段!我对纯 javascript 或基于 jquery 的解决方案特别感兴趣,但我猜这不太可能。

最佳答案

基于纯 JS 的简单 localStorage polyfill:

演示:http://jsfiddle.net/aamir/S4X35/

HTML:

<a href='#' onclick="store.set('foo','bar')">set key: foo, with value: bar</a><br/>
<a href='#' onclick="alert(store.get('foo'))">get key: foo</a><br/>
<a href='#' onclick="store.del('foo')">delete key: foo</a>​

JS:

window.store = {
    localStoreSupport: function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    },
    set: function(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else {
            var expires = "";
        }
        if( this.localStoreSupport() ) {
            localStorage.setItem(name, value);
        }
        else {
            document.cookie = name+"="+value+expires+"; path=/";
        }
    },
    get: function(name) {
        if( this.localStoreSupport() ) {
            var ret = localStorage.getItem(name);
            //console.log(typeof ret);
            switch (ret) {
              case 'true': 
                  return true;
              case 'false':
                  return false;
              default:
                  return ret;
            }
        }
        else {
            // cookie fallback
            /*
             * after adding a cookie like
             * >> document.cookie = "bar=test; expires=Thu, 14 Jun 2018 13:05:38 GMT; path=/"
             * the value of document.cookie may look like
             * >> "foo=value; bar=test"
             */
            var nameEQ = name + "=";  // what we are looking for
            var ca = document.cookie.split(';');  // split into separate cookies
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];  // the current cookie
                while (c.charAt(0)==' ') c = c.substring(1,c.length);  // remove leading spaces
                if (c.indexOf(nameEQ) == 0) {  // if it is the searched cookie
                    var ret = c.substring(nameEQ.length,c.length);
                    // making "true" and "false" a boolean again.
                    switch (ret) {
                      case 'true':
                          return true;
                      case 'false':
                          return false;
                      default:
                          return ret;
                    }
                }
            }
            return null; // no cookie found
        }
    },
    del: function(name) {
        if( this.localStoreSupport() ) {
            localStorage.removeItem(name);
        }
        else {
            this.set(name,"",-1);
        }
    }
}​

关于javascript - HTML5 本地存储回退解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4692245/

相关文章:

javascript - 使用两个不同的上下文调用 Javascript 函数

flash - HTTPS 服务的 SWF 文件可以请求非安全的 HTTP 内容吗?

actionscript-3 - 如何以编程方式将库中的 MovieClip 添加到舞台?

javascript - 无法在 Chrome 和 Opera 中从 PHP 接收 json 数据

javascript - 检索 Fusion Tables 数据时出现问题 - Google Maps API

javascript - 不使用 getPrototypeOf?

javascript - AngularJS 多个动态指令绑定(bind)

javascript - 从字符串中剥离 ID

javascript - 开关元件的 onchange 函数

actionscript-3 - 在八哥中设置四边形的透明度