HTML5ローカルストレージフォールバックソリューション[終了]


119

localStorageネイティブサポートを持たないブラウザでシミュレートできるJavaScriptライブラリとコードを探しています。

基本的に、localStorageデータを格納するためにを使用して自分のサイトをコーディングし、それがネイティブでサポートされていないブラウザーでも機能することを知りたいと思います。これは、ライブラリがwindow.localStorage存在するかどうかを検出し、存在する場合はそれを使用することを意味します。存在しない場合は、window.localStorage名前空間に独自の実装を作成することにより、ローカルストレージのフォールバックメソッドのようなものを作成します。

これまでのところ、私はこれらの解決策を見つけました:

  1. 単純なsessionStorageの実装。
  2. Cookieを使用する実装(このアイデアには興奮していません)。
  3. Dojoのdojox.storageですが、これは独自のものであり、実際のフォールバックではありません。

FlashとSilverlightはローカルストレージにも使用できることを理解していますが、標準のHTML5 localStorageのフォールバックとして使用する方法は見つかりませんでした。Google Gearsにもこの機能があるのでしょうか?

見つけた関連ライブラリ、リソース、コードスニペットを共有してください!私は特に純粋なjavascriptまたはjqueryベースのソリューションに興味がありますが、それはありそうもないと思います。


sessionStorageとlocalStorageはどちらもWeb Storage仕様(dev.w3.org/html5/webstorage)の一部です。唯一の違いは、ブラウザがデータを保持する期間です。私はあなたが一方を持っているがもう一方は持っていない実装を見つけることができないと思います(しかし私は100%確実ではありません)
rlovtang

1
Gearsが昨年2月正式に失格になったことは言及に値します-私はそれに何も構築しません。
josh3736 2011年

@rlovtang:ありがとう、セッションとローカルストレージの違いを認識しています。24ways.orgの記事(問題の最初のリンク、ソリューション#1)によると、ChromeはlocalStorageのみをサポートし、sessionStorageはサポートしていません。その記事は少し前に書かれたので、おそらくそれはもはや当てはまりません。
Tauren

@ josh3736:ええ、私は個人的にクッキーやギアの使用を避けたいです。私は確かにそれに依存するものは何も構築しませんが、それをインストールした人のためのフォールバックストレージメカニズムであり、それに直接コード化しなかった場合は、それを使用できます。
Tauren

だから私は実際には間違っていました:) ChromeがかつてlocalStorageをサポートしていたが、sessionStorageはサポートしていないことを知りませんでした。現在、Chromeは両方をサポートしています。
rlovtang '15年

回答:


56

私は、PersistJSgithubリポジトリ)を使用します。PersistJSは、クライアント側のストレージをコードに対してシームレスかつ透過的に処理します。単一の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に制限されます)。


10
PersistJSはまだサポートされていますか?ブラウザーがアップグレードされ、選択されたストレージ方式が変更される(たとえば、ローカルストレージが使用可能になる)場合の問題がどのように解決されるのかと思います。古い場所にアクセスできなくなりますか?
jcalfee314 2014

2
少なくとも活発に開発されているようには見えません。
Mahn、2014

これは非常に大胆なライブラリです。ほとんどのテクノロジーの最大サイズについての知識がなければ、アプリが非常に運が良ければ実行できることを確認する必要があります。また、これは<64KBを節約したい場合の唯一の解決策のようです。

@julmotそれがライブラリの目的です。面倒なものを抽象化しながら、利便性を提供します。十分な調査と時間があれば、通常、最大サイズに関係なく、それを機能させる方法を理解できます。もちろん、そのプロジェクトの作者が多すぎると判断したようです...
William

これがSafariのプライベートブラウジングモードで機能するかどうか知っていますか?現在、macOSとiOSの両方のSafari Private BrowsingでlocalStorageがサポートされていないという問題があります。
オースティン

61

純粋なJSベースの単純なlocalStorageポリフィル:

デモ: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);
        }
    }
}​

4
なぜこれが認識されないのですか!?ありがとう!
ロバート

4
:)-私は必要なすべてのものにライブラリ全体を追加するのは好きではありません。
アーミルアフリディ2013

2
JavaScript var expiresでローカルに定義してから、他のスコープでユーザーを許可することはできますか?関数内set
happy_marmoset 2013年

3
Cookieに有効期限を設定することを許可している間、localStorageが期限切れになることは決してないことを指摘したかっただけです。期限切れになるものを探している場合、これはいくつかの問題を引き起こす可能性があります。localstorageに有効期限を追加し、日付の比較を行ってそれがまだ適用可能かどうかを確認することは有益です。もちろん、有効期限が必要な場合はCookieを使用する必要があることも主張します。しかし、このスクリプトは、現在のように一貫性がないのではなく、どちらも有効期限を許可したり許可したりしないでください。
Hanna

1
@MohsinSaeedはプライベートモードです。ブラウザでCookieを作成することもできません。superuser.com/questions/589248/...
アーミルAfridi

19

Modernizr wikiのポリフィルページを見ましたか?

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

そのページのウェブストレージセクションを探すと、10の潜在的なソリューションが表示されます(2011年7月現在)。

幸運を!マーク


1
プライベート/シークレットモード(SafariやChromeなど)では、そのモードで無効になっているCookieを作成しているため、Cookieを作成していないようです。
Alex Klaus

14

以下は、すべてのコードをローカルスコープ内にカプセル化したAamir Afridiの応答の整頓されたバージョンです。

グローバルret変数を作成する参照を削除し、保存された「true」および「false」の文字列をBrowserStorage.get()メソッド内のブール値に解析することも削除しました。実際に文字列「true」または「true」を保存しようとすると問題が発生する可能性があります。 「false」。

ローカルストレージAPIは文字列値のみをサポートしているため、JavaScript変数データを適切なデータタイプとともにJSON文字列にエンコード/格納することで、JavaScript変数データを保存/取得できます。これは、httpsなどのJSONエンコード/デコードライブラリを使用してデコードできます。 //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

私は個人的にamplify.jsを好みます。これは過去に私にとって非常にうまく機能しており、ローカルストレージのすべてのニーズに推奨しました。

IE 5 +、Firefox 2 +、Safari 4 +、Chrome、Opera 10.5 +、iPhone 2 +、Android 2+をサポートし、ストレージのクロスブラウザーを処理するための一貫したAPIを提供します


3

store.jsは、他のブラウザーでuserData、IE、およびlocalStorageを使用します。

  • それはあまりにも複雑なことをしようとはしません

  • クッキー、フラッシュ、jQueryは必要ありません。

  • クリーンAPI。

  • 5 kb圧縮

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



1

Lawnchairも良い代替手段のようです

芝刈り機は、小さくて外を除いてソファのようなものです。軽量で適応性があり、シンプルでエレガントな永続化ソリューションを必要とするhtml5モバイルアプリに最適です。

  • コレクション。芝刈り機のインスタンスは、実際には単なるオブジェクトの配列です。
  • 適応永続性。基礎となるストアは、一貫したインターフェースの背後で抽象化されています。
  • プラグ可能なコレクションの動作。コレクションヘルパーが必要な場合もありますが、常に必要なわけではありません。

0

ありrealstorageフォールバックとしてGearsを使用しています、。


ありがとう。残念ながら、@ josh3736のPersistJSの提案よりも少ないブラウザーをサポートするようです。私はまだそれを見て、提案を感謝します。
Tauren
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.