localStorage と sessionStorage の使用法の概要

HTML5 では、新しい localStorage 機能が追加されました。この機能は、Cookie のストレージ容量不足の問題を解決するために主にローカル ストレージとして使用されます (Cookie 内の各 Cookie のストレージ容量は 4K)。localStorage でサポートされるサイズは 5M です。この localStorage はブラウザごとに異なります。

1. localStorage は Cookie の 4K 制限を拡張します

2. LocalStorage は、最初に要求されたデータをローカルに保存できます。これは、Cookie と比較して、帯域幅を節約できますが、Zhongcai によってサポートされています。

1. ブラウザのサイズは均一ではなく、localStorage 属性は IE8 以降の IE バージョンでのみサポートされます。

2. 現在、すべてのブラウザーは localStorage の値の型を文字列型に制限しています。これには、日常的に使用される JSON オブジェクトの型に何らかの変換が必要です。

3. localStorage はブラウザのプライバシー モードでは読み取れません。

4. LocalStorage は基本的に文字列を読み取ります。大量のコンテンツを保存すると、メモリ領域が消費され、ページがスタックする原因になります。

5. localStorage はクローラーによってクロールできません

localStorage と sessionStorage の唯一の違いは、localStorage は永続ストレージに属し、sessionStorage は sessionStorage に属することです。セッションが終了すると、sessionStorage のキーと値のペアがクリアされます。

ここでは localStorage を使用して分析します

localStorage のブラウザ サポート:

ここでの特別な説明は、IE ブラウザを使用している場合、UserData がストレージとして使用されるということです。ここでの主な説明は localStorage の内容であるため、userData についてはあまり説明しません。ブロガーの個人的な意見では、特に説明はありません。現在の IE6/IE7 は廃止の段階にあり、今日の多くのページ開発には HTML5/CSS3 などの新しいテクノロジが含まれているため、互換性を確保するために UserData を使用することは通常ありません。

まず、localStorage を使用する場合、ブラウザが localStorage 属性をサポートしているかどうかを確認する必要があります。

 if(!window.localStorage){alert(ブラウザは localstorage をサポートします); return false }else{ //メイン ロジック ビジネス};

localStorageへの書き込み方法は3つありますので、一つずつ紹介していきます。

 if(!window.localStorage){alert(ブラウザは localstorage をサポートします); return false; var storage=window.localStorage; //b フィールドを書き込みます storage[a]=1; ; // c フィールドを書き込みます storage.setItem(c,3); console.log(typeof storage[b]);ストレージ[c]);

実行後の結果は次のようになります。

ここで、localStorage の使用は同一生成元ポリシーにも従うため、異なる Web サイトが同じ localStorage を直接共有できないことに注意してください。

コンソールに出力される最終結果は次のとおりです。

保存された内容が int 型であることに気付いた読者がいるかどうかはわかりませんが、これは localStorage 自体の特性に関連しており、文字列型の保存のみをサポートしています。

localStorageの読み取り

if(!window.localStorage){alert(ブラウザは localstorage をサポートします); }else{ var storage=window.localStorage; // b フィールドを書き込みます storage.a=1 ; c フィールド storage.setItem(c,3); console.log(typeof storage[b]); を書き込みます。 storage[c]); //最初のメソッドは var a=storage.a; console.log(a); //2 番目のメソッドは var b=storage[b] を読み取ります。 3 番目のメソッドは var c=storage.getItem(c); を読み取ります。

localStorage を読み取るには 3 つの方法があり、公式に推奨されている方法は getItem/setItem です。理由はわかりません。

localStorage はフロントエンドデータベースに相当すると述べましたが、データベースは主に追加、削除、クエリの 4 つのステップで構成されます。ここでの読み取りと書き込みは、追加とクエリの 2 つのステップに相当します。

次に、localStorage の削除と変更の 2 つの手順について説明します。

このステップを変更することは、グローバル変数の値を変更することと同じであるため、理解しやすいです。ここでは、例を使用して簡単に説明します。

 if(!window.localStorage){ alter(ブラウザは localstorage をサポートします); }else{ var storage=window.localStorage; // b フィールドを書き込みます storage.b=1 ; c フィールドを書き込みます storage.setItem(c,3); // console.log(typeof storage[a]); storage[b]); // console.log(storage[c]); /*区切り線*/ console.log(storage.a);

コンソールでは、a キーが 4 に変更されていることがわかります。

localStorageの削除

1. localStorage の内容をすべてクリアします

var storage=window.localStorage; storage.setItem(c,3); storage.log(storage);

2. localStorage 内のキーと値のペアを削除します。

 var storage=window.localStorage; storage.setItem(c,3); storage.log(storage.a);

コンソールで結果を表示する

localStorageキーの取得

var storage=window.localStorage; storage.setItem(c,3); for(var i=0;i<storage.length;i++){ var key=storage.key(i);ログ(キー);

key() メソッドを使用して、インデックスに出入りすることで対応するキーを取得します。

4. localStorage に関するその他の考慮事項

通常、JSON は localStorage に保存しますが、localStorage は自動的に localStorage を文字列形式に変換します。

現時点では、JSON.stringify() メソッドを使用して JSON を JSON 文字列に変換できます。

例：

 if(!window.localStorage){alert(ブラウザはローカルストレージをサポートしています); }else{ var storage=window.localStorage; var data={ name:'xiecanyong'、性別:'program' }; =JSON.stringify(data); コンソール.log(storage.data);

読み取り後、JSON 文字列を JSON オブジェクトに変換するには、JSON.parse() メソッドを使用します。

 var storage=window.localStorage; var data={ 名前:'xiecanyong'、性別:'プログラム' }; var d=JSON.stringify(data,d); /JSON 文字列を JSON オブジェクト出力に変換します。 var json=storage.getItem(data) var jsonObj=JSON.parse(json); jsonObj);

出力されるのは Object オブジェクトです

もう 1 つ注意すべき点は、他の型は読み取られるときに変換する必要があることです。