ホームページ  >  記事  >  ウェブフロントエンド  >  HTMl5 ストレージ メソッド sessionStorage および localStorage_html5 チュートリアル スキルの詳細な説明

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

WBOY
WBOYオリジナル
2016-05-16 15:48:121646ブラウズ

したがって、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;}
}

ストレージ イベント オブジェクトの特定の属性は次のとおりです。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。