HTML5ローカルストレージフォールバックソリューション
ネイティブサポートを持たないブラウザでlocalStorageをシミュレートできるJavaScriptライブラリとコードを探しています。
基本的に、localStorageを使用してデータを保存し、ネイティブにサポートしていないブラウザでも機能することを知って、サイトをコーディングしたいと思います。これは、ライブラリがwindow.localStorageが存在するかどうかを検出し、存在する場合はそれを使用することを意味します。存在しない場合は、window.localStorage名前空間に独自の実装を作成することにより、ローカルストレージの何らかのフォールバックメソッドを作成します。
これまでのところ、私はこれらのソリューションを見つけました：
- シンプル sessionStorage 実装。
- 実装 Cookieを使用する （この考えに興奮していない）。
- Dojoの dojox.storage ですが、それは独自のものであり、実際のフォールバックではありません。
FlashとSilverlightはローカルストレージにも使用できることを理解していますが、それらを標準のHTML5 localStorageのフォールバックとして使用することについては何も発見していません。おそらくGoogle Gearsにもこの機能がありますか？
見つかった関連ライブラリ、リソース、またはコードスニペットを共有してください！私は特に純粋なjavascriptまたはjqueryベースのソリューションに興味がありますが、それはありそうにないと思います。
PersistJS （ github repository ）を使用します。これは、クライアント側のストレージをコードに対してシームレスかつ透過的に処理します。単一のAPIを使用して、次のバックエンドのサポートを取得します。
- 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に制限されます）。
純粋な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);
}
}
}
modernizr wikiのポリフィルページを見ましたか？
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
そのページのwebstorageセクションを検索すると、10の潜在的なソリューションが表示されます（2011年7月現在）。
幸運を！マーク
以下は、すべてのコードをローカルスコープ内にカプセル化したAamir Afridiの応答の整理されたバージョンです。
グローバルret変数を作成する参照を削除し、保存された「true」および「false」文字列の解析をBrowserStorage.get()メソッド内のブール値に削除しました。実際には、文字列「true」または「false」を保存しようとしています。
ローカルストレージAPIは文字列値のみをサポートしているため、JavaScriptデータを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を提供します
store.jsは、userDataとIEおよびlocalStorageを他のブラウザーで使用します。
複雑すぎることをしようとはしません
Cookie、フラッシュ、jQueryは必要ありません。
きれいなAPI。
5 kb圧縮
DOMストレージのMDNページ は、Cookieを使用するいくつかの回避策を提供します。
Lawnchair も良い選択肢のようです
芝生は、小さくて外側を除いてソファのようなものです。軽量で適応性があり、シンプルでエレガントな永続化ソリューションを必要とするhtml5モバイルアプリに最適です。
- コレクション。芝生のインスタンスは、実際には単なるオブジェクトの配列です。
- 適応持続性。基になるストアは、一貫したインターフェイスの背後で抽象化されます。
- プラグ可能なコレクションの動作。コレクションヘルパーが必要な場合もありますが、常にではありません。
realstorage があり、Gearsをフォールバックとして使用します。