はじめに

webサイト制作の学習で「ボタンを押したらカウントが増える」という仕組みを作成した際、
ページの再読み込みをするとカウントが初期値に戻ってしまうという問題が発生しました。

しかし、「Local Storage」を使うことでこの問題を簡単に解決することができたので、
Local Storageを利用した「値が保持されるカウンター」の作成方法をまとめました。

作成したもの

「クリック」のボタンを押すと数字が1ずつ増えるカウンターを作成しました。
ポイントはページ更新をしたり、ブラウザを開き直したりしてもカウントの値が保持されるということです。

ブラウザに値を保存する「Local Storage」

今回、値の保持を実現させるために「Local Storage」を利用しました。
Local SrotrageとはWebページで取り扱うデータをブラウザに保存する仕組みで、
以下のような特徴があります。

ブラウザを開いたり閉じたりしてもデータが保存され続ける
JavaScriptによる制御が簡単にできる
文字列形式で値が格納される
※ 数字を保存したと思っても文字列として保存されてしまうため、
　保存前にJSON形式に変換する必要があります。(変換の方法は後ほど説明)

JSONとは

「JavaScript Object Notification」の略で、JavaScriptで値を取り扱うためのドキュメント規格です。

もともとはJavaScript上で値を取り扱うためのフォーマットでしたが、JavaScriptで値を扱ううえで便利に利用できることから、JavaScriptフロントエンドの普及に伴い、バックエンドと通信する際のフォーマットとして利用されはじめました。

https://camp.trainocate.co.jp/magazine/whats-json/

作成したコード

Local Storageを利用して完成したコードがこちらです。

HTMLファイル

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>count</title>
</head>
<body>
    <h1>カウンター</h1>
    <p></p>
    <button>クリック</button>

    <script src="app.js"></script>
</body>
</html>

htmlファイルはシンプルな構成で、
クリックするための<button>とクリックした回数が表示される<p>を用意しています。

JavaScriptファイル

app.js

//要素の取得
const number = document.querySelector('p');
const countButton = document.querySelector('button');

//ページ読み込み時の処理
window.addEventListener("load",()=>{
   //Local Storageの値を読み込み
    var jsonCount = localStorage.getItem('storage'); //【※1】
    count = JSON.parse(jsonCount) //【※2】

   //読み込んだcountがnull（カウントなし）の場合はHTMLの<P>を0に書き換え
    if(!count){  
        number.innerHTML = 0;
   //nullでない場合はHTMLの<P>をcountの値に書き換え
    }else{
        number.innerHTML = count;
    }
});

//ボタンがクリックされたときの処理
countButton.addEventListener('click',function(){
    count ++;
    number.innerHTML = count; //HTMLの<p>をcountの値に書き換え

   //Local Storageに値を保存
    jsonCount = JSON.stringify(count); //【※3】
    localStorage.setItem('storage',jsonCount); //【※4】
});

Local Storageに関連する箇所（上記コードの【※1~4】）を詳しく説明します。
（保存→読み込みの流れで説明をするため、数字の順番が前後します。）

【※3】countの値をJSON形式に変換

　まず、ボタンのクリックでcountの値が更新されたら
　JSON.stringify()を用いてcount（数値）をJSON形式に変換します。
　ここでは、変換後の値をjsonCountに格納しています。

【※4】Local Storageに保存

　次に、localStorage.setItem()を用いて
　JSON形式に変換されたjsonCountをLocal Storageに保存します。
　第1引数にはキーとなる名前を設定し、第2引数には保存したい値を設定します。

ここまでで現在のcountの値をJSON形式でLocal Storageに保存させることができました。
ここからがページの再読み込みをした際に、保存された値を読み込む処理です。

【※1】Local Storageから値の取り出し

　ページの読み込みを行うと、localStorage.getItem()を用いて
　先ほど保存したjsonCountの値を呼び出します。
　引数には保存時に設定したキー（'storage'）を指定します。

【※2】JSON形式からJavaScriptのオブジェクトに戻す

　取り出したjsonCountを数値として扱えるようにするために
　JSON.perse()を用いてJavaScriptのオブジェクトに戻します。

以上の処理により、ページの再読み込みをした場合に前回の続きからカウントができるようになりました。

まとめ

今回は、Local Storageを用いて「値が保持されるカウンター」を作成しました。

Local Storageは簡単な制御でブラウザにデータを保存できますが、
その分セキュリティには十分注意が必要です。
利用すべき場面を上手く見極め、Local Storageを活用できるようにしたいと思います。

【JavaScript】LocalStorageで値が保持されるカウンター作成