JavaScriptのデータ保存方法（Cookie、SessionStorage、LocalStorage）

データ保存方法の違い

比較項目CookieSessionStorageLocalStorage容量4KB5〜10MB（ブラウザ、環境依存）5〜10MB（ブラウザ、環境依存）保存期限期間など独自に設定可能タブを閉じるまで永続的に保持、ブラウザアプリのアンインストールなどで消える保存場所ローカルのブラウザアプリ内及び、サーバーローカルのブラウザアプリ内ローカルのブラウザアプリ内HTTPリクエストの送信有無有無無アクセス制御別タブ、別ウィンドウからのアクセス可能同一のタブからのみアクセス可能別タブ、別ウィンドウからのアクセス可能

Cookie

値の保存

document.cookie = "key=値";

値の取得

function getCookie(key) {
  var cookies = document.cookie;
  var cookiesArray = cookies.split(';');
  var result = "";
  cookiesArray.map((item) => {
    var cArray = item.split('=');
    if (cArray[0] == key) {
      result = cArray;
    }
  });
  return result;
}
getCookie('key');

有効期限設定

const second = 600 // 600秒
document.cookie = "key=値" + ";max-age=" + second;

SessionStorage

値の保存

sessionStorage.setItem('key','値');

値の取得

sessionStorage.getItem('key');

値の削除

sessionStorage.removeItem('key');

全データの削除

sessionStorage.clear();

LocalStorage

値の保存

localStorage.setItem('key','値');

値の取得

localStorage.getItem('key');

値の削除

localStorage.removeItem('key');

全データの削除

localStorage.clear();