WEBストレージ（localStorage, sessionStorage）、cookieの概要

WEB Storage(localStorage, sessionStorage)はHTML5で新しく作られた仕組みで、ブラウザ上にデータを保存することができます。同じくデータを保存する仕組みにcookieがありますが、こちらは主にセッションを管理する目的で使用され、単なるブラウザ上のデータの保存はWEB Storageを利用することが多いみたいです。
ブラウザに保存されているデータは開発者ツールのアプリケーションタブで見ることができます。

参考に一覧があるので、見ることをお勧めします。
参考

試してみる

localStorageとsessionStorageの使い方は基本的に同じ。
localStorage.setItem(key, 値);でデータを保存して、localStorage.getItem(key)で保存されている値を取得する。また、localStorage.removeItem(key);でkeyに対応する値を削除する。（sessionStorageのメソッドも同じ）

index.html

...
    <script src="./index.js"></script>
</head>
<body>
  <h1>local storageを使ってみる</h1>
  <input type="button" value="localStorage" onclick='setLocalStorage()'>
  <input type="button" value="sessionStorage" onclick='setSessionStorage()'>
  <input type="button" value="cookie" onclick='setCookie()'>
</body>
</html>

localStorageを使ってみる

index.js

let setLocalStorage = () => {
  if(localStorage.getItem('localKey') === null) {
    //localStorageにデータがなかったらhogeを入れる
    localStorage.setItem('localKey', 'hoge');
  } else if(localStorage.getItem('localKey') === 'hoge') {
    //localStorageにデータがあったら'hoge'+'hoge'を入れる
    let localKeyValue = localStorage.getItem('localKey');
    localStorage.setItem('localKey', localKeyValue + 'hoge');
  } else {
    //localStorageを削除する
    localStorage.removeItem('localKey');
  }
}

ボタンを1回クリックしたとき

ボタンを2回クリックしたとき

sessionStorageを使ってみる

index.js

let setSessionStorage = () => {
  if(sessionStorage.getItem('sessionKey') === null) {
    sessionStorage.setItem('sessionKey', 'hoge');
  } else if(sessionStorage.getItem('sessionKey') === 'hoge') {
    //sessionStorageにデータがあったら'hoge'+'hoge'を入れる
    let sessionKeyValue = sessionStorage.getItem('sessionKey');
    sessionStorage.setItem('sessionKey', sessionKeyValue + 'hoge');
  } else {
    //sessionStorageを削除する
    sessionStorage.removeItem('sessionKey');
  }
}

ボタンを2回クリックしたとき

こちらはタブを閉じて開きなおすと値が消えていることが確認できる。

cookieを使ってみる。

cookieの場合はストレージとは違い、document.cookie = 'name=hoge';といった形でデータを保存する。複数の値を設定する場合も一つずつ順にdocument.cookieに代入することで、それぞれ別に保存することができる。
cookieの保存期間を設定する場合、document.cookie = "名前=値; max-age=残存期間";
またはdocument.cookie = "名前=値; expires=日付";と記載すればよい。
参考

index.js

let setCookie = () => {
  // console.log(document.cookie)
  if(document.cookie === '') {
    document.cookie = 'name=hoge';
  } else if(document.cookie === 'name=hoge'){
    let preCookie = document.cookie;
    console.log(document.cookie)
    document.cookie = `id=1; max-age=300`;    //有効期間300秒を設定
  } else {
    console.log(document.cookie);
  }
}

ボタンを2回クリックする

ボタンを3回クリック
以下のように名前=値;名前=値;の形式で保存されている

ブラウザを再起動すると有効期間を設定したidのみ保存されていることが確認できる。

WEBストレージ（localStorage, sessionStorage）、cookieをJavaScriptで使ってみる

WEBストレージ（localStorage, sessionStorage）、cookieの概要

試してみる

localStorageを使ってみる

sessionStorageを使ってみる

cookieを使ってみる。