詳細はlocalStorage

基本的な紹介
localStorageはhtml 5に新しく追加された属性で、フロントエンドにデータを格納するローカルデータベースとして使用されます.クッキーのローカルデータの格納に制限がある不足(クッキーは4 kのメモリしかない)を解決しました.異なるブラウザではlocalstorageデータサイズのサポートは異なりますが、クッキーのメモリ制限よりもはるかに大きいです.
セッションストアとの違い
localStorageは、手動で削除しない限り、ブラウザを長く保存するためのキャッシュです.sessionStorageは、ページに一時的にデータを保存し、ページやラベルが閉じられるとデータが削除されます.したがって、適切な格納方法を選択してデータを保存することができる.
localStorageの利点

localStorageは、従来のクッキーよりも大きな記憶容量

を有する.

localStorageは、要求された使い捨てデータおよびブラウザ帯域幅を占有してこれらの情報を格納および取り戻す必要がなく、ユーザの習慣的な動作に関する情報をローカルに格納することができる.アップロード要求速度

localStorageの欠点

localStorageバージョン互換性の問題

localStorageはstringタイプのデータのみを格納することができ、number,object,arrayなどの他のタイプは強制的にタイプをStringストレージ

に変換する.

localStorageストレージの内容が大きい場合、ページのロード時間に影響します.ここではlocalStorage読み取りに関する2つの考え方の詳細

をもたらす.

ページが最初に入るとデータが読み込まれ、その後の読み込み中に素早くアクセスできます.しかし、その後、これらのデータが使用されない可能性があるため、ページのロードがブロックされます.

localStorageは、1回目の使用(js操作)で呼び出され、ページロードの中断を阻止することができるが、1回目のlocalStorageでデータにアクセスしたときにブラウザがページに対する処理(js実行、ページレンダリングなど)を中断することを意味する.ディスクファイルのすべてのlocalStorageデータがメモリに書き込まれ、localStorageデータの読み取り速度が速くなります.同様に、localStorageで保存したデータは、まずメモリに書き込まれ、後でディスクファイルに書き込まれ、書き込み速度が速くなります.

localStorageは爬虫類によって取得できません

localStorageの使用
フロントエンドのクラス・データベースの格納方法として、localStorageには基本的な削除変更機能が含まれている必要があります.
新規作成

if(!window.localStorage){
    alert("      localstorage");
    return false;
}else{
    var storage=window.localStorage;
    //  a  
    storage["a"]=1;
    //  b  
    storage.b=1;
    //  c  
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
}

読み取り

if(!window.localStorage){
    alert("      localstorage");
}else{
    var storage=window.localStorage;
    //  a  
    storage["a"]=1;
    //  b  
    storage.a=1;
    //  c  
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
    //       
    var a=storage.a;
    console.log(a);
    //       
    var b=storage["b"];
    console.log(b);
    //       
    var c=storage.getItem("c");
    console.log(c);
}

変更

if(!window.localStorage){
    alert("      localstorage");
}else{
var storage=window.localStorage;
    //  a  
    storage["a"]=1;
    //  b  
    storage.b=1;
    //  c  
    storage.setItem("c",3);
    console.log(storage.a);
    // console.log(typeof storage["a"]);
    // console.log(typeof storage["b"]);
    // console.log(typeof storage["c"]);
    /*   */
    storage.a=4;
    console.log(storage.a);
}

削除
1、localStorageのすべての内容をクリアする

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

2、localStorageのキー値ペアを削除する

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

に注意

異なるサイトは、同じlocalStorage

を共有することはできません.

一般的にJSONはlocalStorageに格納されますが、localStorageではlocalStorageが自動的に文字列形式に変換されます.この時私たちはJSONを使うことができます.stringify()という方法で、JSONをJSON文字列に変換します.