2021-01-27ローカルストレージ

8189 ワード

(一)概説インターネットの急速な発展に伴い、ウェブベースの応用はますます普遍的になり、同時にますます複雑になり、様々なニーズを満たすために、大量のデータを常にローカルに格納するために、HTML 5規範は関連ソリューションを提案した.
(二)ローカルストレージの特性1.ユーザーブラウザにデータを格納
2 .設定、読み取りが便利で、ページをリフレッシュしてデータを失わないように設定する
3 .容量が大きく、sessionStorageが約5 M、localStorageが約20 M
4 .オブジェクト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();

(四)ローカルストレージを利用してユーザー名を記憶するケース
<body>
    <input type="text">
    <input type="checkbox">      

    <script>
        var ipts = document.querySelectorAll('input');

        if (window.localStorage.getItem('uname')) {
      
            ipts[0].value = localStorage.getItem('uname');
            ipts[1].checked = true;
        } else {
      
            ipts[1].checked = false;
        }
        //             change 
        ipts[1].addEventListener('change', function() {
      
            if (this.checked) {
      
                window.localStorage.setItem('uname', ipts[0].value);
            } else {
      
                window,
                localStorage.removeItem('uname');
            }
        })
    script>
body>