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

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_datatypeボックスの種類=”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>段落終了

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

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

となるッピ!

ユウキ
ユウキ

おおお! なんか文字が出てきた~!

うさタブ
うさタブ

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

うさタブ
うさタブ

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

ここまでのコード
<!-- 見えない部分 -->
<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>好きな数字を入力して下さい。それに10を足します。</p>
<input name="input_data" id="input_data" type="text" value="" />

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

<p id="data_box"></p>
ユウキ
ユウキ

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

うさタブ
うさタブ

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

うさタブ
うさタブ

そんなときは

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>好きな数字を入力して下さい。それに10を足します。</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>
学習のまとめ
  • localStorage.setItemで、ローカルストレージへ保存
  • localStorage.getItemで、ローカルストレージから読み込み
  • Number()関数で文字データを数字に変換する

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJSゲームJSゲームテクニックプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました