HTML5 では、新しい localStorage 機能が追加されました。この機能は、Cookie のストレージ容量不足の問題を解決するために主にローカル ストレージとして使用されます (Cookie 内の各 Cookie のストレージ容量は 4K)。localStorage でサポートされるサイズは 5M です。この localStorage はブラウザごとに異なります。
2. localStorage の利点と制限事項ローカルストレージの利点1. localStorage は Cookie の 4K 制限を拡張します
2. LocalStorage は、最初に要求されたデータをローカルに保存できます。これは、Cookie と比較して、帯域幅を節約できますが、Zhongcai によってサポートされています。
localStorage の制限事項1. ブラウザのサイズは均一ではなく、localStorage 属性は IE8 以降の IE バージョンでのみサポートされます。
2. 現在、すべてのブラウザーは localStorage の値の型を文字列型に制限しています。これには、日常的に使用される JSON オブジェクトの型に何らかの変換が必要です。
3. localStorage はブラウザのプライバシー モードでは読み取れません。
4. LocalStorage は基本的に文字列を読み取ります。大量のコンテンツを保存すると、メモリ領域が消費され、ページがスタックする原因になります。
5. localStorage はクローラーによってクロールできません
localStorage と sessionStorage の唯一の違いは、localStorage は永続ストレージに属し、sessionStorage は sessionStorage に属することです。セッションが終了すると、sessionStorage のキーと値のペアがクリアされます。
ここでは localStorage を使用して分析します
3. 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 つ注意すべき点は、他の型は読み取られるときに変換する必要があることです。