ローカルストレージ(Local Storage)

Window.localStorage - Mozilla external_link

  • HTML5 の新機能で、ブラウザ自体にデータを保管する機能である web storage の一つ。
  • GROWI では以下の箇所などで利用
    • drafts データ(新規ページの初回保存までの最終編集状態)の保持
    • ユーザーリスト
    • 選択中の言語(ja or en)
    • エディター設定
    • ダークモードの利用状態

参考: https://www.granfairs.com/blog/staff/local-storage-01 external_link (cookie についても説明してくれてる)

使い方

hoge.js
windows.localStorage // そのドメインの ローカル Storage オブジェクト windows.localStorage.setItem('myCat', 'Tom'); // 'myCat' に値 'Tom' を格納 windows.localStorage.myCat = 'Tom'; // 上記と同様 windows.localStorage.getItem('myCat'); // -> 'tom' windows.localStorage.myCat // -> 'Tom' windows.localStorage.removeItem('myCat'); // -> 'myCat' データを削除

ブラウザ上でローカルストレージの中身を確認する

Chrome

dev ツールの Application > Storage > Local Storage > ドメイン名

Screen Shot 2020-04-03 at 13.36.39.png

FireFox

dev ツールの Storage > Local Storage > ドメイン名

Screen Shot 2020-04-03 at 13.38.43.png