隣の妹はみなできる---ローカルストレージ

ターゲット:
セッションストアデータを書き出すことができるストレージと、localStorageデータを書き出すことができるストレージを取得し、両者の違いを説明できるようにする
ローカルストレージ
インターネットの急速な発展に伴い、ウェブベースの応用はますます普遍的になり、同時にますます複雑になり、様々なニーズを満たすために、大量のデータを常にローカルに格納することができ、HTML 5規範は関連ソリューションを提出した.
ローカルストレージの機能

データは、ユーザブラウザに記憶する

.

設定、読み取りが便利、さらにはページリフレッシュでデータが失われない

.

容量が大きく、sessionStorage約5 M、localStorage約20 M

は文字列のみを格納、オブジェクトJSONを格納することができる.stringify()符号化後記憶

1.window.sessionStorage

ライフサイクルは、ブラウザウィンドウを閉じる

です.

同じウィンドウ(ページ)でデータを共有できる

は、

を用いることをキー値対として記憶する.
データの保存:

sessionStorage.setItem(key, value)

データの取得:

sessionStorage.getItem(key)

データの削除:

sessionStorage.removeItem(key)

データのクリア:(すべてクリア)

sessionStorage.clear()

2.window.localStorage

宣言期間は永続的に有効であり、手動で削除しない限りページを閉じる

も存在する.

マルチウィンドウ(ページ)共有可能(同じブラウザで共有可能)

は、

を用いることをキー値対として記憶する.
データの保存:

localStorage.setItem(key, value)

データの取得:

localStorage.getItem(key)

データの削除:

localStorage.removeItem(key)

データのクリア:(すべてクリア)

localStorage.clear()

3.両者の違い

同じ点:使用方法が一致し、ブラウザにデータを保存することができます.

相違点:

ライフサイクルが異なり、localStorageは永続的に有効になります.手動で削除しない限り、sessionStorageはブラウザページを閉じるだけで、データは失効します.

localStorageはマルチウィンドウ(ページ)で共有(同じブラウザで共有)でき、sessionStorageは単一ページでのみ有効です.

4.ケース:ユーザー名を記憶する
プレビュー:
注意:ユーザー名を覚えるチェックをすると、次回ユーザーがブラウザを開くと、テキストボックスに前回ログインしたユーザー名が自動的に表示されます.
ケーススタディ

データを格納し、ローカルストレージ

に使用する.

ページを閉じ、ユーザー名を表示することもできるのでlocalStorage

を使用します.

ページを開いて、このユーザー名があるかどうかを判断し、ある場合はフォームにユーザー名を表示し、チェックボックス

をチェックします.

チェックボックスが変更されたときchangeイベント

チェックされている場合は記憶し、そうでない場合は

を除去する.
サンプルコード:

<input type="text" id="username">
    <input type="checkbox" name="" id="remember">     
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        //            
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        //          ，          
        remember.addEventListener('change', function() {
            //           
            if (this.checked) {
                localStorage.setItem('username', username.value);
            } else {
                localStorage.clear();
            }
        })
    </script>