Local Storage – JavaScriptでブラウザに値保存
Local Storageの説明
LocalStorage（ローカルストレージ）は、ローカル環境のWEBブラウザに、 JavaScriptの処理で情報データ（値）を保存することができます。
また、保存された情報データは、WEBブラウザを閉じた状態でも保存されており、再度WEBブラウザを起ち上げると情報データは反映される特徴を持っています。
LocalStorageの逆に、ブラウザを閉じると情報データが消えてしまうのにsessionStorageがあります。
■LocalStorageの保存例
■ソースコード
|
1 2 3 4 |
<script> var hozon = '保存する値'; localStorage.setItem('atai', hozon ); </script> |
■ブラウザ表示
※表示なし
■LocalStorageの取得例
■ソースコード
|
1 2 3 4 |
<script> var data = localStorage.getItem('atai'); document.write(data); </script> |
■ブラウザ表示
保存する値
■LocalStorageの指定した削除例
■ソースコード
|
1 2 3 4 |
<script> var data2 = localStorage.removeItem('atai'); document.write(data2); </script> |
■ブラウザ表示
undefined
※空の値
■LocalStorageの初期化例
■ソースコード
|
1 2 3 |
<script> localStorage.clear(); </script> |
■ブラウザ表示
※表示なし
■LocalStorageの更新ごとに値追加される例
■ソースコード
|
1 2 3 4 5 6 7 8 9 10 |
<script> if(!localStorage.getItem('atai')){ var value=""; }else{ var value=localStorage.getItem('atai'); } var data = value+"■"; localStorage.setItem('atai', data ); document.write(data); </script> |
■ブラウザ表示
■
↓
■■
↓
■■■