【JavaScript】ローカルストレージを使ってみる

こんにちは！セミマサです。

ローカルストレージの使い方を学ぶために簡単なクリックゲームを作ってみました。

デモサイト
ソースコード
おわりに

デモサイト

今回のデモサイトです。月をクリックするとスコアが増えます。スコアを消費して団子を買うこともできますが特に意味はないです。

ソースコード

HTML

<section>
    <div id="loader-bg">
        <img src="img/load.gif">
    </div>
    <div class="moon-container">
        <p class="moon-counts" id="counts">0</p>
        <img src="img/moon.png" alt="月です。クリックしてね！" class="moon" id="moon">
        <div class="dumpling-container">
            <img src="img/dumpling.png" alt="団子の数" class="dumpling">
            <span class="dumpling-count" id="dumpling-count"> × 0</span>
        </div>
        <button id="buy" class="buy">団子を買う(スコア10消費)</button>
        <button id="button" class="save">セーブ</button>
        <button id="delete" class="delete">データを消す</button>
    </div>
</section>

</div>

</div>

<button id="buy" class="buy">団子を買う(スコア10消費)</button>

<button id="delete" class="delete">データを消す</button>

</div>

</section>

今回のHTMLです。

CSS

.moon-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  background-color: rebeccapurple;
}
.moon-counts{
  font-size: 2rem;
  text-align: center;
  margin-bottom: 8px;
  color:white;
}
.moon{
  width: 25%;
  cursor: pointer;
}
.dumpling{
  width: 20%;
  margin-right: 16px;
}
.dumpling-count{
  color:white;
}
.dumpling-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 8px 0;
}
.save{
  margin-top: 8px;
}
.delete{
  margin-top: 8px;
  background-color:red;
  border:2px tomato ridge;
}
#loader-bg {
  background: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10; }
 
#loader-bg img {
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; }
#loader-bg.hide {
  display: none;
}

.moon-container{

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

padding: 16px 0;

background-color: rebeccapurple;

}

.moon-counts{

font-size: 2rem;

text-align: center;

margin-bottom: 8px;

color:white;

}

.moon{

width: 25%;

cursor: pointer;

}

.dumpling{

width: 20%;

margin-right: 16px;

}

.dumpling-count{

color:white;

}

.dumpling-container{

display: flex;

justify-content: center;

align-items: center;

flex-direction: row;

padding: 8px 0;

}

.save{

margin-top: 8px;

}

.delete{

margin-top: 8px;

background-color:red;

border:2px tomato ridge;

}

#loader-bg {

background: #fff;

height: 100%;

width: 100%;

position: fixed;

top: 0px;

left: 0px;

z-index: 10; }

#loader-bg img {

background: #fff;

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: 10; }

#loader-bg.hide {

display: none;

}

今回のCSSです。

JavaScript

let count = 0;
let dumpling = 0;
let text = document.getElementById('counts');
const moon = document.getElementById('moon');
const buy = document.getElementById('buy');
const button = document.getElementById('button');
const dbutton = document.getElementById('delete');
const dumpling_text = document.getElementById('dumpling-count');

let data =JSON.parse(localStorage.getItem('score'));
if(data){
    text.textContent = data.click;
    count = data.click;
    dumpling_text.textContent = ' × '+ data.dump;
    dumpling = data.dump;
}
const click = ()=>{
    count++;
    text.textContent = count;
}
const lsSave = ()=>{
    let savedata = {
        click:count,
        dump:dumpling
    }
    localStorage.setItem('score',JSON.stringify(savedata));
}
const lsDelete = ()=>{
    localStorage.removeItem('score');
}
const loading = ()=>{
    document.getElementById('loader-bg').classList.add('hide');
}
const dumpling_buy = ()=>{
    if(count < 10){
        return;
    }
    count-=10;
    dumpling++;
    text.textContent = count;
    dumpling_text.textContent = ' × '+ dumpling;
}
moon.addEventListener('click',click);
buy.addEventListener('click',dumpling_buy);
button.addEventListener('click',lsSave);
dbutton.addEventListener('click',lsDelete);
window.addEventListener('load',loading);

let count = 0;

let dumpling = 0;

let text = document.getElementById('counts');

const moon = document.getElementById('moon');

const buy = document.getElementById('buy');

const button = document.getElementById('button');

const dbutton = document.getElementById('delete');

const dumpling_text = document.getElementById('dumpling-count');

let data =JSON.parse(localStorage.getItem('score'));

if(data){

text.textContent = data.click;

count = data.click;

dumpling_text.textContent = ' × '+ data.dump;

dumpling = data.dump;

}

const click = ()=>{

count++;

text.textContent = count;

}

const lsSave = ()=>{

let savedata = {

click:count,

dump:dumpling

}

localStorage.setItem('score',JSON.stringify(savedata));

}

const lsDelete = ()=>{

localStorage.removeItem('score');

}

const loading = ()=>{

document.getElementById('loader-bg').classList.add('hide');

}

const dumpling_buy = ()=>{

if(count < 10){

return;

}

count-=10;

dumpling++;

text.textContent = count;

dumpling_text.textContent = ' × '+ dumpling;

}

moon.addEventListener('click',click);

buy.addEventListener('click',dumpling_buy);

button.addEventListener('click',lsSave);

dbutton.addEventListener('click',lsDelete);

window.addEventListener('load',loading);

今回のスクリプトです。

今回使ったローカルストレージのメソッド

・localStorage.setItem(‘名前’,’値’)→ 名前と値を紐づけてローカルストレージにデータを保存します。

・localStorage.getItem(‘名前’)→名前に紐づいている値をローカルストレージから取得します。

・localStorage.removeItem(‘名前’)→名前に紐づいている値をローカルストレージから消します。

全体の流れ

・最初に変数countと変数dumplingに0を代入します。

・各要素をgetElementByIdで取得。

・変数dataにローカルストレージに格納されている値を代入します。その際JSON.parseメソッドを使ってJavaScriptで使える形式に戻しています。

・dataに値が入っていた場合は画面上の表示を更新します。

セミ君

読み込み演出で更新前のカウントを隠しています。

クリックイベント関係

・月をクリックするとスコアが増えます。

・スコアが10以上の時に「団子を買う」ボタンを押すとスコアを10消費して団子のカウントを増やします。

・「セーブ」ボタンを押すと「現在のクリック数」と「所持している団子の数」をローカルストレージに保存します。その際にJSON.stringifyメソッドを使って値をJSON文字列に変換しています。

・「データを消す」ボタンを押すとローカルストレージに保存されているデータを消します。今回のデモサイトでは警告無しでデータを消してしまいますが、実際に運用する場合はalert等を用いて削除の前にクッションを用意するべきだと思います。

おわりに

ローカルストレージの操作はゲーム作りでも使えそうなので今後に活かしていきたいと思います。