2021-01-27ローカルストレージ
8189 ワード
(一)概説インターネットの急速な発展に伴い、ウェブベースの応用はますます普遍的になり、同時にますます複雑になり、様々なニーズを満たすために、大量のデータを常にローカルに格納するために、HTML 5規範は関連ソリューションを提案した.
(二)ローカルストレージの特性1.ユーザーブラウザにデータを格納
2 .設定、読み取りが便利で、ページをリフレッシュしてデータを失わないように設定する
3 .容量が大きく、sessionStorageが約5 M、localStorageが約20 M
4 .オブジェクトJSONを格納できる文字列のみ.stringify符号化後記憶
(三)
1 .window.sessionStorageプロパティ:①ライフサイクルはブラウザウィンドウを閉じる②同じウィンドウ(ページ)でデータを共有できる③キー値ペアで保存する
構文:①保存
②取得
③削除
④全て削除
2 .window.localStorageプロパティ:①ライフサイクルは永続的で、手動で削除しない限り②マルチウィンドウで共有でき、同じブラウザで共有できる③キー値ペアで保存して使用できる
構文:①保存
②取得
③削除
④全て削除
(四)ローカルストレージを利用してユーザー名を記憶するケース
(二)ローカルストレージの特性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>