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

データ保存方法の違い

比較項目	Cookie	SessionStorage	LocalStorage
容量	4KB	5〜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();