はじめに

簡単にWeb Storageについて説明をします。

Web Storageとは

  • Cookieよりも大容量のデータをブラウザ側に保存できるAPI
  • Key-Value型で保存が可能
  • ストレージは2種類でsessionとlocalに分けられる

Cookie

  • WebサイトによってユーザーのPCに保存される小さなファイル
  • 「ユーザーに関する情報を覚えておく」を目的にしている

sessionStorage

  • ウィンドウ/タブごとのセッションで有効なストレージ
  • 一回限りのセッションで有効になるため、ウィンドウ/タブを閉じるとデータが失われる
  • ウィンドウ間でデータが共有されることはない

localStorage

  • オリジン単位でデータを永続的に保存するストレージ
  • ウィンドウ/タブを閉じてもデータは失われない
  • ウィンドウ/タブ間でデータを共有することが出来る
比較
Cookie session local
保存容量 4KB(キロ) 1オリジン当たり5MB(メガ) 1オリジン当たり5MB(メガ)
データの保存期間 指定期限まで有効 ウィンドウ/タブを閉じるまで有効 永続的に有効
サーバーへのデータ送信 サーバーへアクセスする度に自動送信 必要なときにスクリプトかフォームで送信 必要なときにスクリプトかフォームで送信
別ウィンドウでのデータ共有 出来る 出来ない 出来る
オリジン
  • http://www.hoge.com:3000 のような「プロトコル://ドメイン名:ポート番号」のこと
  • 保存は「ドメイン:ポート番号」の組み合わせになる、これをオリジン単位という

使ってみた

setItem

localStorage.setItem('name', 'shota');

これだけでKeyにname、Valueにshotaが入る。
検証->Application->Local Storageから確認可能。
※localStorageでデータ保存をしていますが、sessionStorageに書き換えるとSession Storageに入ります。

localStorage.setItem('name', 'kubo');
localStorage.setItem('full_name', 'shota_kubo');

Key名を一緒にして、Valueを変えるとshotaは上書きされてkuboが入る。
Key名を別にすると、kuboは上書きされずに新しく発行される。

getItem

cosnt getName = localStorage.getItem('name');
console.log(getName);

getItemで指定したキーの値を取得出来ます。
console.logで、検証->Consoleに出力されていると思います。

removeItem

localStorage.removeItem('name');

const getName = localStorage.getItem('name');
console.log(getName);

removeItemを指定すると指定したキーのデータが削除されます。
ここでは、keyが取得出来ずにnullが返されます。

clear

localStorage.setItem('last_name', 'shota');
localStorage.setItem('first_name', 'kubo');
localStorage.setItem('full_name', 'shota_kubo');

localStorage.clear();

clearはすべてのデータを削除します。
よって、localStorageには何も表示されません。

こぼれ話

Number型でデータを入れても文字列に変更される。
なので、以下のコードを書いても

localStorage.setItem('num_1', 1);
localStorage.setItem('num_2', 2);
localStorage.setItem('num_3', localStorage.getItem('num_1') + localStorage.getItem('num_2'));

1 + 2は12になる。

参考サイト

http://www.htmq.com/webstorage/
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API#Private_Browsing_Incognito_modes
https://www.w3schools.com/html/html5_webstorage.asp

最後に

以上です、ありがとうございました。
誤字脱字・その他ご指摘がある場合は、コメントいただけたら幸いです。