コメント:HTML5のWebストレージには、SessionStorageとLocalStorageの2つのストレージ方法が含まれています。 SessionStorageは、ローカルのセッションにデータを保存するために使用されます。これは、同じセッションのページでのみアクセスでき、セッションが終了した後にデータは破棄されます。
したがって、SessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージのみです。 LocalStorageは、永続的なローカルストレージに使用されます。積極的に削除されない限り、データは決して期限切れになりません。1。WebストレージとCookieの違い
Webストレージの概念はCookieに似ています。違いは、より大きな容量ストレージ用に設計されていることです。 Cookieのサイズは限られており、新しいページをリクエストするたびにCookieが送信され、目に見えないほど帯域幅が廃棄されます。さらに、Cookieを指定する必要があり、ドメイン全体で呼び出すことはできません。
さらに、Webストレージには、setitem、getItem、removeItem、clear、およびその他の方法があります。 Cookieとは異なり、フロントエンドの開発者はSetCookiesとGetCookies自身をカプセル化する必要があります。
しかし、Cookieも不可欠です。Cookieの機能はサーバーと対話し、HTTP仕様の一部として存在することですが、Webストレージはデータをローカルに保存するためにのみ作成されます(@otakustayからの修正)
2。HTML5 Webストレージのブラウザサポートステータス
IE7以下を除き、他の標準ブラウザはそれを完全にサポートしています(IEとFFはWebサーバーで実行する必要があります)。 IEは常に良いことをしていることに言及する価値があります。たとえば、IE7およびIE6のuserDataは、実際にはJavaScriptのローカルストレージのソリューションです。単純なコードカプセル化により、Webストレージをサポートするすべてのブラウザに統合できます。
ブラウザがLocalStorageをサポートするかどうかを判断するには、次のコードを使用できます。
アラート( "Browse support localstorage")
}
それ以外
{
アラート(「ブラウジングはLocalStorageをサポートしていません」)
}
//またはif(typeof windof.localStorage == 'undefined'){alert( "BrowsingはLocalStorageをサポートしません")}
3。LocalStorageおよびSessionStorage Operations
LocalStorageとSessionStorageの両方に、setitem、getItem、removeitemなど、同じ動作方法があります。
LocalStorageとSessionStorageの方法:
setItemストレージ値
目的:キーフィールドに値を保存します
使用法:.setItem(key、value)
コード例:
localStorage.setItem( "site"、 "js8.in");
getItem get value
目的:指定されたキーにローカルに保存されている値を取得します
使用法:.getitem(key)
コード例:
var site = localstorage.getitem( "site");
removeItemキーを削除します
目的:指定されたキーにローカルに保存されている値を削除します
使用法:.removeItem(key)
コード例:
localstorage.removeItem( "site");
すべてのキー/値をクリアします
目的:すべてのキー/値をクリアします
使用法:.clear()
コード例:
localstorage.clear();
4。その他の動作方法:ポイント操作と[]
Webストレージは、アクセスを容易にするために独自のsetItem、getItemなどを使用するだけでなく、DOT(。)演算子と[]メソッドを使用して、次のコードのように通常のオブジェクトのようなデータを保存します。
var Storage = window.localStorage; Storage.key1 = "hello";
ストレージ["key2"] = "world";
console.log(stray.key1);
console.log(straige ["key2"]);
5.ローカルストレージとセッションストレージのキーおよび長さの特性は、トラバースに実装されています
SessionStorageおよびLocalStorageによって提供されるKey()と長さは、次のコードなど、保存されたデータトラバーサルを簡単に実装できます。
var Storage = window.localStorage;
for(var i = 0、len = storage.length; i <len; i ++)
{
var key = storage.key(i);
var value = storage.getitem(key);
console.log(key + "=" + value);
}
6。ストレージイベント
ストレージはストレージイベントも提供します。キー値が変更またはクリアすると、ストレージイベントをトリガーできます。たとえば、次のコードは、ストレージイベントの変更のリスニングを追加します。
window.addeventlistener( "ストレージ"、handle_storage、false);
}
else if(window.attachevent)
{
window.attachevent( "onstorage"、handle_storage);
}
function handle_storage(e){
if(!e){e = window.event;}
}
ストレージイベントオブジェクトの特定のプロパティは次のとおりです。
propertytepedesscription
KeyStringは、追加、削除、または変更された名前の鍵
OldValueanythe前の値(現在上書き)、または新しいアイテムが追加された場合はnull
newValueanythe new value、またはアイテムが追加された場合のnull
この変更をトリガーした方法を呼び出すページ/uristringページ