Webローカルストレージ

Webローカルストレージ

説明:ブラウザでは、Web Storageのキー値を使用すると、Cookieを格納する方法よりも直感的で、容量が大きくなります.localStorageとsessionStorage sessionStorage(一時的なストレージ):各データ・ソースに1つのストレージ領域を維持し、閲覧器が開いている間にページの再ロードlocalStorage(永続的なストレージ)を含む2つのストレージ領域が含まれます.sessionStorageと同じですが、ブラウザが閉じた後、データは常に存在しますCookie:役割

cookie ， 。 ， （ ） ， cookie ， 、 session （ ）

特徴1.ブラウザによって保存されているクッキーの位置が異なり、通用しません.
2.クッキーのストレージはドメイン名で区別され、異なるドメインで格納されるクッキーは独立している.
3.クッキーが有効なドメイン(現在クッキーが存在するドメインを設定するサブドメイン)を設定できます.つまり、私たちが操作できるクッキーは現在のドメインと現在のドメインの下のすべてのサブドメインです.
4.1つのドメイン名の下に格納されるクッキーの個数には制限があり、ブラウザによって格納される個数は異なり、一般的に20個である.
5.クッキーごとに格納されるコンテンツのサイズにも制限があり、ブラウザによって格納サイズが異なり、一般的に4 KBである.
6.クッキーは期限切れの時間を設定することもできます.デフォルトはセッションが終了したとき、期限切れになったら自動的に破棄されます.
localStorageとsessionStorage:sessionStorageとlocalStorageの使い方はほぼ一致しており、参照タイプの値をJSONに変換する

ローカル

にデータを保存

 const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));

ローカルストレージから取得するデータ

  var data1 = JSON.parse(sessionStorage.getItem('key'));
    var data2 = JSON.parse(localStorage.getItem('key'));

ローカルストレージで保存するデータを削除する

.

   sessionStorage.removeItem('key');
    localStorage.removeItem('key');

保存されているすべてのデータを削除する

  sessionStorage.clear();
    localStorage.clear();

ローカルストレージの変更を傍受する

.
Storageが変更(追加、更新、削除)された場合のトリガーですが、同じページでの変更はトリガーされず、同じドメイン名の下で他のページでの変更のみがモニターされます.

window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

localStorage/sessionStorageのメリット
1.localStorageはクッキーの4 K制限を広げた.localStorageでは、最初に要求されたデータをローカルに直接保存できます.この5 Mサイズのフロントエンドページ向けのデータベースは、クッキーよりも帯域幅を節約できますが、これは高バージョンのブラウザでしかサポートされていないlocalStorage/sessionStorageの限界です.
1.ブラウザのサイズが統一されておらず、IE 8以上のIEバージョンではlocalStorageという属性がサポートされていない.現在、すべてのブラウザでlocalStorageの値タイプをstringタイプに限定しています.これは、私たちが日常的によく見ているJSONオブジェクトタイプにいくつかの変換が必要です.localStorageはブラウザのプライバシーモードの下では読み取れない4.localStorageは本質的に文字列の読み取りであり、記憶内容が多いとメモリ領域が消費され、ページがカード5になる.localStorageが爬虫類に捕まえられないlocalStorageとsessionStorageの唯一の違いは、localStorageが永続的なストレージに属し、sessionStorageがセッションが終了すると、sessionStorageのキー値ペアが空になります.