RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

イベント詳細についてはこちらをクリック

JavaScriptでWebStorageを管理する方法

はじめに

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

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

最後に

今回はJavaScriptを用いてWebStorageの管理を行いました。 簡易的な実装しかできませんでしたが、次は時間をかけたJavaScriptの実装を行い、JavaScriptの理解を深めたいと思います。

参考にしたサイト

Copyright © RAKUS Co., Ltd. All rights reserved.