web関連

【javascript】ブラウザに値を保存するWebStorageを使ってみた

2020/04/20

GET送信で値を受け渡す以外に、javascriptを使ってブラウザに値を保存することができるWebStorageというものがあるみたいなのでメモ

↓↓↓以前、URLにクエリ文字を渡してどうのこうのしたときの備忘録

【jQuery】スクロールして指定したリンクが画面内に入ったら自動でリンク先に遷移
ブログサイトに自動スクロール&自動ページ遷移機能を実装したかった時の備忘録 今回はスクロールして該当のリンクがあったら自動でページ遷移する...

WebStorageとは

ブラウザに値を渡して保存してくれる仕組み
sessionStorageとlocalStorageの2種類がある

sessionStorage(ブラウザを閉じたら値は消える)
localStorage(ブラウザを閉じても値は消えない)

論より証拠ということでデモ作ってみた
読み込み直しても値は消えない

sessionStorageとlocalStorageの使い方

<script>
【保存】
sessionStorage.keyname = '値';
sessionStorage['keyname'] = '値';
sessionStorage.setItem('keyname', '値');

【取得】
sessionStorage.getItem('keyname');

【削除】
sessionStorage.removeItem('keyname');

【初期化】
sessionStorage.clear();
</script>

localStorage使いたい時は、
sessionStoragelocalStorageに書き換えるだけ(※ちゃんと確認してない)

さすがにシークレットウィンドウは保持してくれなかった

▼参考

HTML5 WebStorage まとめ

sessionStorageをつかってみる

 

ページを遷移した後も値を使いまわしたかったときの備忘録
こんな便利なモノあったんすね、知らなかった