したがって、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)
コード例:
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 は、次のコードのような保存されたデータの走査を簡単に実装できます。