HTML5 local Storage fallback solutions [zamknięty]

Szukam bibliotek i kodu javascript, które mogą symulować localStorage w przeglądarkach, które nie mają natywnego wsparcia.

Zasadniczo chciałbym zakodować moją stronę za pomocą localStorage do przechowywania danych i Wiem, że nadal będzie działać na przeglądarkach, które nie wspierają jej natywnie. Oznaczałoby to, że biblioteka wykryje, czy window.localStorage Istnieje i użyje jej, jeśli istnieje. Jeśli nie istnieje, to tworzy jakąś alternatywną metodę lokalnego przechowywania, tworząc własną implementację w window.localStorage przestrzeń nazw.

Do tej pory znalazłem takie rozwiązania:

  1. prosta sessionStorage implementacja.
  2. implementacja wykorzystująca pliki cookie (nie zachwycona tym pomysłem).
  3. Dojo ' s dojox.storage , ale to jest coś własnego, nie do końca awaryjnego.

Rozumiem, że Flash i Silverlight mogą być również używane do lokalnej pamięci masowej, ale nie znalazłem nic na temat korzystania z nich jako alternatywy dla standardowego HTML5 localStorage. Być może Google Gears też ma taką możliwość?

Udostępnij powiązane biblioteki, zasoby lub fragmenty kodu, które znalazłeś! Byłbym szczególnie zainteresowany czystymi rozwiązaniami javascript lub jQuery, ale zgaduję, że jest to mało prawdopodobne.

Author: Tauren, 2011-01-14

9 answers

Używam PersistJS (repozytorium github), które bezproblemowo i przejrzyście obsługuje pamięć po stronie klienta. Używasz jednego API i uzyskujesz wsparcie dla następujących backendów:

  • flash: Flash 8
  • gears: trwała pamięć masowa oparta na narzędziach Google.
  • localstorage: HTML5 draft storage.
  • whatwg_db: HTML5 draft database storage.
  • globalstorage: HTML5 draft storage (stara Specyfikacja).
  • ie: Internet Zachowania danych użytkownika Explorer.
  • cookie: trwałe przechowywanie oparte na plikach Cookie.

Każdy z nich może zostać wyłączony-jeśli na przykład nie chcesz używać plików cookie. Dzięki tej bibliotece uzyskasz natywną obsługę pamięci masowej po stronie klienta w IE 5.5+, Firefox 2.0+, Safari 3.1+ i Chrome; i wsparcie wtyczek, jeśli przeglądarka ma Flash lub Gears. Jeśli włączysz pliki cookie, będzie to działać we wszystkim (ale będzie ograniczone do 4 kB).

 54
Author: josh3736,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-11 13:18:07

Pure js based simple localStorage polyfill:

Demo: 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);
        }
    }
}​
 55
Author: Aamir Afridi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-13 14:38:19

Widziałeś stronę polyfill na Modernizr wiki?

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

Poszukaj sekcji webstorage na tej stronie, a zobaczysz 10 potencjalnych rozwiązań(stan na lipiec 2011).

Powodzenia! Mark

 19
Author: Mark Lummus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-09 22:56:40

Ja osobiście wolę wzmacniać.js . W przeszłości działał bardzo dobrze i polecałem go dla wszystkich lokalnych potrzeb przechowywania.

[[0]} obsługuje IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ i zapewnia spójne API do obsługi pamięci między przeglądarkami
 10
Author: raidfive,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-15 20:14:29

Poniżej znajduje się uporządkowana Wersja odpowiedzi Aamira Afridiego, która przechowuje cały kod w lokalnym zasięgu.

Usunąłem referencje, które tworzą globalną zmienną ret, a także usunąłem parsowanie zapisanych łańcuchów "true" I " false "do wartości logicznych w metodzie BrowserStorage.get(), co może powodować problemy, jeśli ktoś próbuje w rzeczywistości zapisać ciągi" true "lub"false".

Ponieważ lokalny API pamięci masowej Obsługuje tylko wartości łańcuchowe, można nadal przechowywać/pobierać Zmienna JavaScript data wraz z ich odpowiednimi typami danych poprzez kodowanie tych danych w łańcuch JSON, który może być następnie dekodowany za pomocą biblioteki kodowania/dekodowania JSON, takiej jak 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);
        }
    };
})();
 10
Author: Steven,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-23 20:59:56

Sklep.js używa userData i IE oraz localStorage w innych przeglądarkach.

  • Nie próbuje robić niczego zbyt złożonego

  • Bez ciasteczek, bez Flasha, bez jQuery.

  • Czyste API.

  • 5 kb compressed

Https://github.com/marcuswestin/store.js

 3
Author: Mikko Ohtamaa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-16 22:28:23

Strona MDN do przechowywania DOM zawiera kilka obejść, które używają plików cookie.

 1
Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-11 00:48:56

Lawnchair wydaje się być również dobrą alternatywą

Trawnik jest trochę jak kanapa, z wyjątkiem mniejszych i na zewnątrz. perfect dla aplikacji mobilnych html5, które wymagają lekkiego, adaptacyjnego, prostego i eleganckie rozwiązanie trwałe.

  • Kolekcje. instancja lawnchair jest tak naprawdę tylko szeregiem obiektów.
  • adaptacyjna trwałość. bazowy sklep jest abstrakcyjny za spójnym interfejsem.
  • pluggable collection behavior. czasami potrzebujemy pomocników, ale nie zawsze.
 1
Author: j0k,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-11 13:21:24

Istnieje realstorage , który wykorzystuje Gears jako alternatywę.

 0
Author: Gaurav,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-14 17:59:24