JavaScriptでWebStorageを管理する方法

はじめに

こんにちは。新卒2年目のy_kwmtです。最近WebStorageに触れる機会があったので、JavaScriptでWebStorageのデータを保存、上書き、削除する方法について説明します。

はじめに
WebStorageとは
SessionStorageとは
LocalStorageとは
ローカル環境で実装
最後に
参考にしたサイト

WebStorageとは

WebStorageとは、ユーザのローカルブラウザにデータを保存する仕組みのことを言います。 WebStorageはSessionStorageとLocalStorageの2種類に分かれます。

SessionStorageとは

SessionStorageへ持っている値はウィンドウを閉じるまで有効となります。別タブ、別ウィンドウへの共有はできません。

LocalStorageとは

LocalStorageへ持っている値はウィンドウを閉じたあとでも有効となっています。別タブ、別ウィンドウへの共有ができます。

ローカル環境で実装

今回はSessionStorageを用いてボタンを押した回数を保存、削除します。「カウント」ボタンを押してカウントを増やし、「クリア」ボタンを押して、カウントをクリアします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button id="count">カウント</button>
    <button id="clear">クリア</button>
    <script>
      document.getElementById("count").onclick = function() {
        sessionStorage.setItem('count', eval(Number(sessionStorage.getItem('count')) + 1));
      };
      document.getElementById("clear").onclick = function() {
        sessionStorage.removeItem('count');
      };
    </script>
  </body>
</html>

sessionStorage(localStorage).getItemでデータの取得を行います。「sessionStorage.getItem('count')」で「count」というkeyを持つsessionStorageのvalueを取得することができます。

sessionStorage(localStorage).setItemでデータの追加、上書きを行います。「sessionStorage.setItem('count', eval(Number(sessionStorage.getItem('count')) + 1));」で、「count」というkeyを持つsessionStorageのvalueを1ずつ増やした値を上書きしています。

sessionStorage(localStorage).removeItemでデータの削除を行います。「sessionStorage.removeItem('count');」で、「count」というkeyを持つsessionStorageのデータを削除します。

ブラウザでの実行の様子がこちらです。

f:id:y_kwmt:20190625092823g:plain