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

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

参考に一覧があるので、見ることをお勧めします。
[参考](https://qiita.com/pipiox/items/95554673ba3b078ac112)


# 試してみる
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回クリックしたとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/756a1528-62b9-7671-7d94-b8e4ad9eee18.png)

ボタンを2回クリックしたとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/7f467e54-6dc7-8586-87f7-da542a2a38f9.png)


## 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回クリックしたとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/4dce7d5b-5a9e-ad8e-73d5-77feba89490f.png)

こちらはタブを閉じて開きなおすと値が消えていることが確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/8c7fa243-a17a-8724-1137-d208f57c19fd.png)


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


```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回クリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/3bc61388-a344-1065-ba0e-382bc510bbbc.png)

ボタンを3回クリック
以下のように名前=値;名前=値;の形式で保存されている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/5d367a7c-2a5c-1268-f961-f35cfb1af0fa.png)

ブラウザを再起動すると有効期間を設定したidのみ保存されていることが確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130321/ddf08248-3dec-eacf-df8f-acc0b9bc529f.png)