【html/javascript】Local storageなるものを使ってみる

　色々あって久々の更新になります。

　最近ちょっとhtmlとかjavascriptとかをやっていて「同じブラウザで開いたページ間でデータのやり取りとかできないのかな？」という疑問を持って調べていると「Local storage」という機能があることを知りました。

　今回はこの「Local storage」機能を使った備忘録となります。

　では始めます。

１：Local storageについて
　ブラウザ自体にある記憶領域のことです。Local storageはブラウザを閉じても残り続けます。
　なので「ずっとブラウザ内に保存しておきたい情報」などはLocal storageに記録しておくと良いかと思います。

　詳細なCookieなどとの違いは以下の参考資料のページに記載があるので参照してください。

ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方 | 株式会社グランフェアズ

２：Local storageの使い方
　Local storageの使い方は基本的には以下のようになります。

// Local storageへの書き込み
localStorage.setItem("key", value);

// Local storageの読み込み
localStorage.getItem("key");

// 指定のキーのデータを削除
localStorage.removeItem("key");

// Local storageを初期化(全消去)
localStorage.clear();

// storageイベント(storageが変更された際の処理)
window.addEventListener("storage", function (event) {
  console.log("length: " + Object.keys(event.storageArea).length); // storageのサイズを取得
});

３：Local storageのサンプル
　Local storageの使い方がわかったので、サンプルとして以下のhtmlとjavascriptを使って実験してみます。マウスのクリックやkeyupの検知などでjQueryを使っています。

・index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Local storage</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="textDiv">画面をクリック(カウントアップ)またはキーアップ(ローカルストレージの削除)してください。</div>
<script src="script.js"></script>
</body>
</html>

・script.js

var counter = 0;

$(document).ready(function(){
  // クリック判定
  $('html').click(function(e){
    counter = counter + 1;
    localStorage.setItem("counter", counter);
    var str = "本ページがクリックされました。登録された番号は[" + counter + "]です。";
    showText(str);
  });

  // キーアップされた時の処理
  $('html').keyup(function(e){
    localStorage.clear();
    counter = 0;
    showText("本ページがキーアップされました。Local storageは空です");
  });
});

// テキストを表示させる関数
function showText(text) {
  var textDiv = document.getElementById("textDiv");
  textDiv.innerHTML = text;
}

// storageイベント(storageが変更された際の処理)
window.addEventListener("storage", function (event) {
  console.log("length: " + Object.keys(event.storageArea).length);

  if(Object.keys(event.storageArea).length > 0) {
    // 登録されているstorageが0より多い場合
    counter = parseInt(localStorage.getItem("counter"));
    var str = "別のページでクリックされました。登録された番号は[" + counter + "]です。";
    showText(str);
  } else {
    // storageが空になった場合
    showText("別のページでキーアップされました。Local storageは空です");
    console.log("Empty.");
    counter = 0;
  }
});