webStorageについて

JavaScript

Web Storageとは

  • ブラウザ上にデータを保存する仕組みのことです。
  • データの保存,削除はJavaScriptを使うことで操作することができます
  • Web Storageには、Local StorageとSession Storageが存在します。
    データの持つ期間等の違いがあるので、使い分けが必要になります。
  • keyに対して対応する値を入れることができる

localStorage

  • データの有効期限は永続的に持っている(消えないので、消したいときには意図的に消すことが必要)
  • データ量の上限は5MB
  • 別タブでもデータの共有が可能
let key = 'keyName';
let value = {'name': 'hogehoge'};
localStorage.setItem(key,JSON.stringify(value));
localStorage.getItem(key);
localStorage.removeItem(key);

sessionStorage

  • ウィンドウやタブを閉じるまでの期間有効
  • データ量の上限は5MB
  • タブ内でしかデータを持てない
let key = 'keyName';
let value = {'name': 'hogehoge'};
session.Storage.setItem(key,JSON.stringify(value));
session.Storage.getItem(key);
session.Storage.removeItem(key);

Cookie

  • 別ウィンドウでのデータ共有可能
  • 有効期限をつけることができる
  • データ量の上限は4KB

JavaScript