【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>

今回の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;
}

今回の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);

今回のスクリプトです。