JavaScript入門講座｜ローカルストレージについて学ぼう

うさタブ

今日はローカルストレージについて勉強するッピ！

ユウキ

ローカルストレージ？？

うさタブ

ローカルストレージは、
ブラウザ上（自分のPC）に【変数】データを保存して、
その変数データを呼び出して計算したり、文字を表示したりする仕組みのことッピ！

うさタブ

このローカルストレージが理解できれば、

JavaScriptでロールプレイングゲームやシミュレーションゲームの

セーブポイントを作ることもできるッピ！

ユウキ

ほんとかよ！　すげえええええ

うさタブ

本当ッピよ！

うさタブ

JavaScriptは基本的に

ページを離れたらそのデータは消えてしまうことが多いッピが、

このローカルストレージを使うことで

データを保存して使っていろんなことをすることができるんだッピ～

ユウキ

ふーん

おもしろそうじゃん！　さっそくやってみようぜ

サンプルプログラム

好きな名前を入力して下さい

全体のコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

// データのセーブ
function save() {
   let sample_data = document.getElementById("input_data").value;
   localStorage.setItem("sample_data", sample_data);
    }

// データの読み込み
function load() {
   let sample_data = "";
    if(!localStorage.getItem("sample_data")) {
          sample_data = "No data";
        } else {
          sample_data = localStorage.getItem("sample_data");
        }

        document.getElementById("data_box").innerHTML = sample_data;
      }


</script>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<p>好きな名前を入力して下さい</p>
<input name="input_data" id="input_data" type="text" value="" />

<button onclick="save();">セーブ</button>
<button onclick="load();">ロード</button>

<p id="data_box"></p>

<!-- ここまで！ -->
</body>
</html>

うさタブ

今回はこのコードを詳しく解説していくッピ♫

サンプルプログラム
全体のコード

ローカルストレージついて学ぼう

ローカルストレージついて学ぼう

必要なもの

うさタブ

メモ帳
ブラウザ

が必要ッピ！

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>






</script>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<!-- ここまで！ -->
</body>
</html>

うさタブ

↑のコードをコピーして、

準備ができたらレッツ・ラーニングッピ！

うさタブ

まずは<body></body>に

<!-- ↓この下にHTMLタグを入力してね！↓ -->
<p>好きな名前を入力して下さい</p>
<input name="input_data" id="input_data" type="text" value="" />

<button onclick="save();">セーブ</button>
<button onclick="load();">ロード</button>

<p id="data_box"></p>

と入力するッピ！

ユウキ

お？　こんな感じかな

うさタブ

いい感じッピ！

ユウキ

あれ？

ボタン押したけど、まだ動かないんだなぁ

うさタブ

その通りっぴ！

うさタブ

まずは
出力ブロックと入力ブロックをつくって、

このあとにプログラムを組んでいくッピ～！

うさタブ

ちなみにこのタグは

<p>段落好きな名前を入力して下さい
</p>段落終了

<input入力ボックス作成 name　判別名は=”input_data“ id　住所は=”input_data” typeボックスの種類=”text文字” valueデフォルト入力値=”” />

<buttonボタン作成 onclick　クリックしたら=”save();このプログラムが動きます“>セーブ</buttonボタン終了>
<buttonボタン作成 onclick　クリックしたら=”load()このプログラムが動きます;“>ロード</buttonボタン終了>

という意味になるッピよ～

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>



</script>

<!-- ↓この下にHTMLタグを入力してね！↓ -->

<p>好きな名前を入力して下さい</p>
<input name="input_data" id="input_data" type="text" value="" />

<button onclick="save();">セーブ</button>
<button onclick="load();">ロード</button>

<p id="data_box"></p>

<!-- ここまで！ -->
</body>
</html>

セーブプログラムをつくる

うさタブ

次はデータのセーブ・プログラムを作るッピ！

ユウキ

なんだか難しそうだなぁ・・・

うさタブ

安心するッピ！

このうさタブがユウキくんをスーパープログラマーにみちびくッピよ～

うさタブ

セーブ・プログラムは<script></script>のあいだに

function save() {
   let sample_data =         document.getElementById("input_data").value;
   localStorage.setItem('sample_data', sample_data);
    }

と入力するッピ！

うさタブ

これは

functionまとめプログラム save() 　名前はsave{ 　です
let変数 sample_data　好きな変数名　 = documentホームページの中にある.getElementid=(input_data)のById(“input_data“入力ボックスへ).value入力したデータです;
localStorageローカルストレージへ.setItemデータを記録します(‘sample_dataデータ名はsample_data‘, sample_data中身に変数sample_dataを記録);
}

という意味になるッピ！

ユウキ

知ってるぜ！

fanction関数で、命令文をまとめてセットにすることができるんだよな！

うさタブ

その通りッピ！　ユウキくんさすがッピよ～

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

// データのセーブ
function save() {
   let sample_data = document.getElementById("input_data").value;
   localStorage.setItem('sample_data', sample_data);
    }

</script>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<p>好きな名前を入力して下さい</p>
<input name="input_data" id="input_data" type="text" value="" />

<button onclick="save();">セーブ</button>
<button onclick="load();">ロード</button>

<p id="data_box"></p>

<!-- ここまで！ -->
</body>
</html>

データを出力する

うさタブ

最後にデータを出力するプログラムをつくるッピ！

ユウキ

出力～？

うさタブ

そうっピ！

データを入力するだけじゃダメッピ！
それを引き出して、計算したりアレンジすることに意味があるッピ！

うさタブ

データを出力するには<script></script>に

function load() {
   let sample_data = "";
    if(!localStorage.getItem("sample_data")) {
          sample_data = "No data";
        } else {
          sample_data = localStorage.getItem("sample_data");
        }

        document.getElementById("data_box").innerHTML = sample_data;
      }

と入力するッピよ～

うさタブ

これは

function命令セット load()　ロードプログラム {
let変数　 sample_dataサンプルデータ = “”空白;

if(もしも!localStorageローカルストレージに.getItem保存したデータと(“sample_data変数の中身がないなら“)) {
sample_data変数の文字データは = “No dataNo dateと表示します“;

} elseそれ以外なら {
sample_data変数データは = localStorageローカルストレージの.getItem保存データ(“sample_data”サンプルデータを取り出します);
}

documentホームページの中の.getElement以下のid(住所)ById(“data_box”detaboxを).innerHTML書き換えて = sample_dataサンプルデータに;
}

という意味になるッピ！

うさタブ

これを最初のタグと合わせて

<p>段落好きな名前を入力して下さい
</p>段落終了

となるッピ！

ユウキ

おおお！　なんか文字が出てきた～！

うさタブ

ムフフ！　これがプログラミングのちからッピ！

うさタブ

この入力と出力をいかして、
いろんなプログラムを組んでみるッピよ～

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

// データのセーブ
function save() {
   let sample_data = document.getElementById("input_data").value;
   localStorage.setItem('sample_data', sample_data);
    }

// データの読み込み
function load() {
   let sample_data = "";
    if(!localStorage.getItem("sample_data")) {
          sample_data = "No data";
        } else {
          sample_data = localStorage.getItem("sample_data");
        }

        document.getElementById("data_box").innerHTML = sample_data;
      }

</script>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<p>好きな名前を入力して下さい</p>
<input name="input_data" id="input_data" type="text" value="" />

<button onclick="save();">セーブ</button>
<button onclick="load();">ロード</button>

<p id="data_box"></p>

<!-- ここまで！ -->
</body>
</html>

ローカルストレージは自分のPCだけ？

ユウキ

そういえば、このローカルストレージに保存したデータはどこにいくんだ？
インターネットに保存されるのか？

うさタブ

それは自分のブラウザに記憶されるんだッピ！
マックやアイフォンなら、Safari
AndroidならGoogle Chrome
ウィンドウズなら、マイクロソフトEdgeになるッピ！

うさタブ

だから、ブラウザの履歴を削除するとデータも消えてしまうから気をつけるッピ

ユウキ

なるほどな～

ローカルストレージ・データを数字へ変換する

ユウキ

なあうさタブ

ちょっと質問なんだけど・・・

うさタブ

どうしたッピ～？

ユウキ

実は、ローカルストレージに保存したデータを使って
計算をしようとおもったんだけど上手くいかなくて・・・

<script>
// データのセーブ
function save() {
   let save_data = document.getElementById("input_data").value;
   localStorage.setItem("localStorage_save_data", save_data);
    }

// データの読み込み
function load() {
   let save_data = "";
    if(!localStorage.getItem("localStorage_save_data")) {
          save_data = "No data";
        } else {
          save_data = localStorage.getItem("localStorage_save_data");
        }

        save_data = save_data +10;//計算プログラム
        document.getElementById("data_box").innerHTML = save_data;
      }
</script>

<p>好きな数字を入力して下さい。それに１０を足します。</p>
<input name="input_data" id="input_data" type="text" value="" />

<button onclick="save();">セーブ</button>
<button onclick="load();">ロード</button>

<p id="data_box"></p>

ユウキ

なんか入力した数字に足し算されずに、
うしろに１０が表示されるんだよな・・・

うさタブ

なるほど！
これはきっと数字が文字データになっているッピね～

うさタブ

そんなときは

Number()

関数を使ってみるッピ！

ユウキ

Number関数？？

うさタブ

これは、文字データを数字データに変換してくれる命令文ッピ！

もちろん、半角英数字の数字じゃないと変換できないから注意するッピよ

ユウキ

そんなものがあるのか！

うさタブ

さきほどの計算プログラムを

save_data = Number(save_data)+10;//計算プログラム

に変えてあげるッピ！

きっとそれで上手くいくッピよ♫

ユウキ

できた～！

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>
// データのセーブ
function save() {
   let save_data = document.getElementById("input_data").value;
   localStorage.setItem("localStorage_save_data", save_data);
    }

// データの読み込み
function load() {
   let save_data = "";
    if(!localStorage.getItem("localStorage_save_data")) {
          save_data = "No data";
        } else {
          save_data = localStorage.getItem("localStorage_save_data");
        }

        save_data = Number(save_data)+10;//変換プログラム
        document.getElementById("data_box").innerHTML = save_data;
      }
</script>

<p>好きな数字を入力して下さい。それに１０を足します。</p>
<input name="input_data" id="input_data" type="text" value="" />

<button onclick="save();">セーブ</button>
<button onclick="load();">ロード</button>

<p id="data_box"></p>
<!-- ここまで！ -->
</body>
</html>

学習のまとめ