HTML5 本地存储回退解决方案

IT技术 javascript jquery flash html local-storage
2021-01-15 05:32:21

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

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

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

  1. 简单的sessionStorage实现。
  2. 使用 cookie的实现(对这个想法并不感兴趣)。
  3. Dojo 的dojox.storage,但它是它自己的东西,并不是真正的后备。

我知道 Flash 和 Silverlight 也可用于本地存储,但还没有发现将它们用作标准 HTML5 localStorage 的后备。也许 Google Gears 也有这个功能?

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

6个回答

基于纯 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);
        }
    }
}​
:) - 我不喜欢为我需要的所有东西添加一个完整的库。
2021-03-15 05:32:21
@MohsinSaeed 在私有模式下,我认为浏览器也不允许您创建 cookie。superuser.com/questions/589248/...
2021-03-20 05:32:21
JavaScript 中是否允许在var expires本地定义然后在其他范围内定义用户?在功能上set
2021-03-23 05:32:21
只是想指出,虽然您允许在 cookie 上设置过期时间,但 localStorage 永远不会过期。如果您正在寻找过期的东西,这可能会导致一些问题。在 localstorage 中添加一个到期日期,然后进行日期比较以查看它是否仍然适用,这可能是有益的。当然,我也会争辩说,如果您需要过期,您应该只使用 cookie。但是我认为这个脚本应该要么不允许过期要么允许过期,而不是像现在这样不一致。
2021-03-27 05:32:21
为什么这没有得到认可!?谢啦!
2021-04-09 05:32:21

我使用PersistJSgithub 存储库),它可以无缝且透明地处理您的代码的客户端存储。您使用单个 API 并获得对以下后端的支持:

  • flash:Flash 8 持久化存储。
  • gears:基于 Google Gears 的持久存储。
  • localstorage:HTML5 草稿存储。
  • whatwg_db:HTML5 草稿数据库存储。
  • globalstorage:HTML5 草稿存储(旧规范)。
  • 即:Internet Explorer 用户数据行为。
  • cookie:基于 cookie 的持久存储。

任何这些都可以禁用 - 例如,如果您不想使用 cookie。使用这个库,您将在 IE 5.5+、Firefox 2.0+、Safari 3.1+ 和 Chrome 中获得原生客户端存储支持;如果浏览器具有 Flash 或 Gears,则支持插件辅助。如果您启用 cookie,它将适用于所有内容(但将限制为 4 kB)。

是否仍然支持 PersistJS?我想知道它如何解决浏览器升级和选择的存储方法发生变化的问题(比如本地存储变得可用)。旧位置是否变得无法访问?
2021-03-23 05:32:21
您知道这是否适用于 Safari 隐私浏览模式吗?目前我遇到了一个问题,即 macOS 和 iOS 的 Safari Private Browsing 都不支持 localStorage。
2021-04-02 05:32:21
@julmot 这就是图书馆的用途。在抽象出繁琐的东西的同时提供便利。通过足够的研究和时间,您通常可以弄清楚如何使其工作,而不管最大尺寸如何。当然,看起来那个项目的作者认为它太多了......
2021-04-04 05:32:21
至少看起来它不再处于积极开发中。
2021-04-07 05:32:21
这是一个非常大胆的图书馆。在对大多数技术中的最大大小没有任何了解的情况下,我们应该庆幸我们的应用程序运行起来很幸运……此外,如果您想节省 < 64KB,这似乎只是一个解决方案。
2021-04-12 05:32:21

你看过 Modernizr wiki 上的 polyfill 页面吗?

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

在该页面上查找 webstorage 部分,您将看到 10 个潜在的解决方案(截至 2011 年 7 月)。

祝你好运!标记

似乎他们都没有在私人/隐身模式下工作(例如 Safari 或 Chrome),因为他们的解决方法是创建 cookie,这在该模式下也被禁用。
2021-03-15 05:32:21

下面是 Aamir Afridi 响应的整理版本,将其所有代码封装在本地范围内。

我删除了创建全局ret变量的引用,并删除了将存储的“true”和“false”字符串解析为BrowserStorage.get()方法中的布尔值,如果试图实际上存储字符串“true”或“错误的”。

由于本地存储 API 仅支持字符串值,因此仍然可以通过将所述数据编码为 JSON 字符串来存储/检索 JavaScript 变量数据及其适当的数据类型,然后可以使用 JSON 编码/解码库(例如https)对其进行解码: //github.com/douglascrockford/JSON-js

var BrowserStorage = (function() {
    /**
     * Whether the current browser supports local storage as a way of storing data
     * @var {Boolean}
     */
    var _hasLocalStorageSupport = (function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    })();

    /**
     * @param {String} name The name of the property to read from this document's cookies
     * @return {?String} The specified cookie property's value (or null if it has not been set)
     */
    var _readCookie = function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    };

    /**
     * @param {String} name The name of the property to set by writing to a cookie
     * @param {String} value The value to use when setting the specified property
     * @param {int} [days] The number of days until the storage of this item expires
     */
    var _writeCookie = function(name, value, days) {
        var expiration = (function() {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days*24*60*60*1000));
                return "; expires=" + date.toGMTString();
            }
            else {
                return "";
            }
        })();

        document.cookie = name + "=" + value + expiration + "; path=/";
    };

    return {
        /**
         * @param {String} name The name of the property to set
         * @param {String} value The value to use when setting the specified property
         * @param {int} [days] The number of days until the storage of this item expires (if storage of the provided item must fallback to using cookies)
         */
        set: function(name, value, days) {
            _hasLocalStorageSupport
                ? localStorage.setItem(name, value)
                : _writeCookie(name, value, days);
        },

        /**
         * @param {String} name The name of the value to retrieve
         * @return {?String} The value of the 
         */
        get: function(name) {
            return _hasLocalStorageSupport
                ? localStorage.getItem(name) 
                : _readCookie(name);
        },

        /**
         * @param {String} name The name of the value to delete/remove from storage
         */
        remove: function(name) {
            _hasLocalStorageSupport
                ? localStorage.removeItem(name)
                : this.set(name, "", -1);
        }
    };
})();

我个人更喜欢amplify.js过去它对我来说非常有效,我推荐它满足所有本地存储需求。

支持 IE 5+、Firefox 2+、Safari 4+、Chrome、Opera 10.5+、iPhone 2+、Android 2+ 并提供一致的 API 来处理跨浏览器的存储