【ゼロからはじめるプログラミング】JavaScript学習 #36

【ゼロからはじめるプログラミング】JavaScript学習 #36

ゼロからはじめるプログラミング講座の第四十八回です。今回はデータを保存するlocalstorageについて解説します。

 

  1. localStorageを知ろう。
  2. localStorageを使ってみよう。

 

 

localStorageを知ろう。

ローカルストレージはブラウザのキャッシュに似てるものです。ブラウザ(PC内)にデータを保存しておく命令です。ローカルストレージの特徴は、

  • サーバー側とデータを共有しない(送る方法はある)
  • 同じドメイン間のみで参照可能
  • 保存期間は消すまで永久

です。JavaScript側で操作するもので非常に簡単に扱うことができます。

ローカルストレージには文字列を保存します。全てString(文字列)です。

文字列でいろいろなデータをユーザー側に保存させます。サーバー側には負荷やデータ蓄積を行わないこともメリットであり、デメリットでもあります。

 

とりあえず使ってみましょう。

 

 

localStorageを使ってみよう。

さっそく使い方を解説します。

localStorage.setItem(key, value) 保存
localStorage.getItem(key) 参照

操作イメージは連想配列(オブジェクト)です。違うところはvalue(値)が全て文字列になるということです。省略した形で、

localStorage.key = valueという形でも保存することができます。

localStorage.keyで参照することもできます。

 

保存されたデータを消す場合は

localStorage.removeItem(key) keyに対応する値を消去

localStorage.clear() 全消去

 


 

ではコードで確認してみましょう。まずはindex.htmlをコピペで作ってください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>JavaScript</title>
</head>
<body>
  <span>データ保存</span>
  <div id="box">
    <form autocomplete="off">
      <p>
        <span>キャラクター名:</span><input id="textbox" type="text">
      </p>
      <p>
        <select name="type">
        <option value="1">攻撃タイプ</option>
        <option value="2">防御タイプ</option>
        <option value="3">回復タイプ</option>
        </select>
      </p>
      <p>
        <input type="checkbox" name="field" value="1">飛行
        <input type="checkbox" name="field" value="2">地上
        <input type="checkbox" name="field" value="3">水中
      </p>
    </form>
    <button id="save" type="button">保存</button>
    <button id="delete" type="button">消去</button>
  </div>
  <script src="test.js"></script>
</body>
</html>
キャラクター名:

飛行地上水中

 

このようにいくつかのフォームがあります。テキストを入力するもの、プルダウンメニューから選ぶもの、チェックボックスなど。ユーザー側が操作できるフォームの値をローカルストレージに保存させ、ページを閉じても値が残るようにしましょう。

 

今回の目的はフォームの値を保存すること。プログラムの構成は、

  1. 各フォーム要素を取得する。
  2. ローカルストレージにある値をフォームに渡す。
  3. 保存を押したらローカルストレージに値を保存する。
  4. 消去を押したらローカルストレージの値を消去する。

です。初めにストレージにある値をフォームの値に設定することで、ページを閉じてもフォーム状態を記憶しているような動作を実現できます。

 

1.各フォーム要素を取得する。

const textbox = document.querySelector("#textbox")
const selectbox = document.querySelector('[name="type"]')
const checkbox = document.querySelectorAll('[type="checkbox"]')

新しい要素選択の方法で属性名属性値を使う方法が出てきました。

<select name=”type“></select>

この要素を属性名と属性値を指定して選択すると、

.querySelector(‘[name=”type“]’)となります。

’[属性名=”属性値“]’

 

2.ローカルストレージにある値をフォームに渡す。

textbox.value = localStorage.getItem("textbox")
selectbox.selectedIndex = localStorage.getItem("selectbox") // nullだと0が選択される
for(let item of checkbox){
  const stname = "checkbox" + item.value
  let bool = localStorage.getItem(stname)
  if(bool == "false") bool = false // 文字列の"false"をfalseに直す
  item.checked = bool // checkedに文字列が渡されるとチェックマークが付く
}

テキストボックスのテキストは.valueのプロパティで取得、書き換えできます。

セレクトボックスの現在の状態は.selectIndexのプロパティで取得、書き換えできます。

チェックボックスの状態は.checkedのプロパティで取得、書き換えできます。

 

.getItem(key)でストレージにある値を取得してプロパティを書き換えています。

keyに対応するvalue(値)がない場合はnull(空)が返ってきます。

この3つのフォームではnullに上手く対応してくれますが、チェックボックスの.checkedのプロパティには真偽値(boolean)を代入する必要があります。

ローカルストレージに保存される値は文字列になるのでfalse“false”になっています。

 

6行目:if(bool == “false”) bool = false 文字列のfalseを真偽値のfalseに直しています。

4行目:const stname = “checkbox” + item.value

item.value これはhtmlの <input type=”checkbox” name=”field” value=”1″>

のvalue属性の部分です。JavaScriptで操作しやすいように目印として属性を付けます。変数stnameにはcheckbox1、checkbox2、checkbox3という文字列が入っていきます。

この文字列がローカルストレージに渡すkeyになります。

 

3.保存を押したらローカルストレージに値を保存する。

const savebtn = document.querySelector("#save")

savebtn.addEventListener("click",function(){
  localStorage.setItem("textbox",textbox.value)
  localStorage.setItem("selectbox",selectbox.selectedIndex)
  for(let item of checkbox){
    const stname = "checkbox" + item.value
    localStorage.setItem(stname,item.checked)
  }
})

3-10:まず保存ボタンのクリックをイベントリスナに登録します。

4,5.setItem(key,value)でストレージに値を保存していきます。

各フォームのプロパティをローカルストレージに保存するvalue(値)にします。

keyは”textbox”,”selectbox”,stnameの[“checkbox1-3”]です。

 

4.消去を押したらローカルストレージの値を消去する。

const deletebtn = document.querySelector("#delete")
deletebtn.addEventListener("click",function(){
  //localStorage.removeItem("key");
  localStorage.clear()
})

localStorage.clear()で全てを消去します。

個別に消したい場合はlocalStorage.removeItem(key)で消去しましょう。

.clear()の全て消去とはそのサイトに対応するデータ全てです。

ローカルストレージのデータはサイト(ドメイン)ごとに分けて保存されています。

ページごとには保存されていないので.clear()のメソッドを使うときは注意が必要です。

keyに対応するvalue(値)を上手く作る必要があります。

test.js

const textbox = document.querySelector("#textbox")
const selectbox = document.querySelector('[name="type"]')
const checkbox = document.querySelectorAll('[type="checkbox"]')

textbox.value = localStorage.getItem("textbox")
selectbox.selectedIndex = localStorage.getItem("selectbox") // nullだと0が選択される
for(let item of checkbox){
  const stname = "checkbox" + item.value
  let bool = localStorage.getItem(stname)
  if(bool == "false") bool = false // 文字列の"false"をfalseに直す
  item.checked = bool // checkedに文字列が渡されるとチェックマークが付く
}

const savebtn = document.querySelector("#save")
const deletebtn = document.querySelector("#delete")

savebtn.addEventListener("click",function(){
  localStorage.setItem("textbox",textbox.value)
  localStorage.setItem("selectbox",selectbox.selectedIndex)
  for(let item of checkbox){
    const stname = "checkbox" + item.value
    localStorage.setItem(stname,item.checked)
  }
})

deletebtn.addEventListener("click",function(){
  //localStorage.removeItem("key");
  localStorage.clear()
})

 

お疲れ様でした。ローカルストレージを使うことで作れるツールの幅が大きく広がりました。次回はローカルストレージに配列を擬似的に保存して扱う方法を解説します。

次も頑張って記事を作るのでチャレンジしてください!

       ____
     /⌒  ⌒\
   /  癶   癶 \
  /::::::⌒(__人__)⌒::::: \ コメント待ってるよー
  |     |r┬-|     |
  \      `ー'´     /

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。