HTMl5 ストレージ メソッド sessionStorage および localStorage_html5 チュートリアル スキルの詳細な説明

したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。 LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
1. Web ストレージと Cookie の違い
Web ストレージの概念は Cookie と似ていますが、大容量のストレージ用に設計されているという点が異なります。 Cookie のサイズは制限されており、新しいページをリクエストするたびに Cookie が送信されるため、帯域幅が浪費されます。また、Cookie はスコープを指定する必要があり、ドメイン間で呼び出すことはできません。
さらに、Web Storage には setItem、getItem、removeItem、clear などのメソッドがあります。Cookie とは異なり、フロントエンド開発者は setCookie と getCookie を自分でカプセル化する必要があります。
しかし、Cookie も不可欠です。Cookie はサーバーと対話するために使用され、HTTP 仕様の一部として存在しますが、Web Storage はデータをローカルに「保存」するためにのみ作成されます (@otakustay からの訂正)
2. HTML5 Web ストレージのブラウザ サポート
IE7 以下を除き、他の標準ブラウザは完全にサポートされています (IE と FF は Web サーバー内にある必要があります) を実行します)。IE は常に良好に機能します。たとえば、IE7 と IE6 の UserData は、実際には JavaScript ローカル ストレージのソリューションです。単純なコードのカプセル化により、すべてのブラウザを統合して Web ストレージをサポートできます。
ブラウザが localStorage をサポートしているかどうかを確認するには、次のコードを使用できます。

コードをコピー

コード

if(window.localStorage){
alert("ブラウズは localStorage をサポートしています")
}
else
{
alert("ブラウズは localStorage をサポートしていません) localStorage")
}
//または if(typeof window.localStorage == 'unknown'){alert("ブラウジングはまだ localStorage をサポートしていません") }

3. LocalStorageおよび sessionStorage 操作
localStorage と sessionStorage は両方とも、setItem、getItem、removeItem などの同じ操作メソッドを持ちます。
localStorage と sessionStorage のメソッド:
setItem は値を格納します
使用法: Store値をキーフィールドに挿入
使用法: .setItem(key, value)
コード例:

コードをコピー

コードは次のとおりです:

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem は値を取得します
目的: 指定されたキーをローカルに取得します保存された値
使用法: .getItem(key)
コード例:

コピーcode

コードは次のとおりです:

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

removeItem 削除キー
目的: ローカルに保存された指定されたキーの値を削除します
使用法: .removeItem(key)
コード例:

コードをコピー

コードは次のとおりです:

sessionStorage.removeItem("key");
localStorage.removeItem("site");

clear すべてのキー/値をクリアします
目的: すべてのキー/値をクリアします
使用法: .clear()
コード例:

コードをコピーします

コードは次のとおりです:

sessionStorage.clear();
localStorage.clear();

4その他の操作方法: ポイント操作と []
Web ストレージ 独自の setItem や getItem などを使用して簡単にアクセスできるだけでなく、ドット (.) 演算子と [] を使用して次のコードのように、通常のオブジェクトのようにデータを保存します:

コードをコピー

コードは次のとおりです:

var storage = window.localStorage; storage.key1 = "hello";
console.log(storage.key1); console.log(storage["key2"]);

5. localStorage sessionStorage の key 属性と length 属性を使用してトラバーサルを実装します
sessionStorage によって提供される key() と length localStorage は、次のコードのような保存されたデータの走査を簡単に実装できます。

コードをコピーコードは次のとおりです。

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. ストレージはストレージ イベントも提供します。たとえば、次のコードはストレージ イベントの変更のリスナーを追加します。 >
コードをコピー

コードは次のとおりです:

if(window.addEventListener){ window.addEventListener("storage",handle_storage, false); }else if(window.attachEvent)

{

window.attachEvent("onstorage",handle_storage);

function handle_storage(e){
if( !e){e=window.event;}
}

ストレージ イベント オブジェクトの特定の属性は次のとおりです。