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

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

localStorageを知ろう。
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.各フォーム要素を取得する。

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

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

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

.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()
})

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

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