ブラウザにデータを保存する方法

概要

Web システムを開発していて、データを保存しておきたいけどクライアント側だけでどうにかしたいという場合の方法をまとめました。

調査結果

調べた結果から書くと、Web Storageを使用しましょう。同じような仕組みとしてcookieもありますが、以下の 3 つの違いから、Web Storageを使用した方が良いと思います。

1. 扱えるデータがWeb Storageのほうが大きい（cookieは 4KB、Web Storageは 5MB）。
2. JavaScript による制御がより簡単。
3. cookieはリクエスト毎に自動送信されてしまう。

使用方法

まずWeb StorageはlocalStorageとsessionStorageに分かれています。２つの主な違いはデータの有効期限で、localStorageは永続的、sessionStorageはウィンドウまたはタブを閉じるまでです。

２つの使用方法に大きな違いは無く、アクセスするオブジェクトが異なるだけです。

• localStorage

  /* storageに値を設定 */
  localStorage.setItem("key", "value");
  
  /* storageから値を取得 */
  let value = localStorage.getItem("key");
  
  /* storageの値を削除 */
  localStorage.removeItem("key");
  

• sessionStorage

  /* storageに値を設定 */
  sessionStorage.setItem("key", "value");
  
  /* storageから値を取得 */
  let value = sessionStorage.getItem("key");
  
  /* storageの値を削除 */
  sessionStorage.removeItem("key");
  

感想

今回調べてみて、Web Storageというものを初めて知りました。Jsonのような使い方ができるので使い勝手も良いと感じました。

記事に間違いや追加してほしい事がありましたら、コメントにご記入ください。
(感想も欲しいです！！💛)

参考文献

MDN Web Strorage API