68
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

LocalStorageをもっとデータベースライクに使う方法

LocalStorageの基本に関してはこちら

LocalStorageとデータベースの違い

LocalStorageはキー&バリューで保存しなくてはいけない。

key value
悟空 サイヤ人
クリリン 地球人
ピッコロ ナメック星人

データベースはカラムを作れるので、キー&バリューよりは使い勝手が良い。

name category strength
悟空 サイヤ人 メチャクチャ強い
クリリン 地球人 地球人としては強い
ピッコロ ナメック星人 それなりに強い

LocalStorageもデータベースみたいに使えないかな?
ということでやってみます。

入力用のフォームサンプルを作ってみた

以下にLocalStorageに入力する用のフォームを作ったのでコピペして使ってください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WebStrage API</title>
  <script type="text/javascript">
    function init() {
      //ここにコードを書いていきます
    }
  </script>
</head>
<body onload="init()">
  <form id="form">
    <label for="name"> 
      名前
      <input type="text" name="name" id="name">
    </label>
    <label for="name"> 
      人種
      <input type="text" name="category" id="category">
    </label>
    <label for="name"> 
      強さ
      <input type="text" name="strength" id="strength">
    </label>
    <div id="result"></div>
  </form>
</html>

すごく簡単ですが、以下の様なフォームになります。
スクリーンショット 2014-04-22 13.34.01.png

フォームに入力した時にデータに保存する

ではさっそくフォームに入力した時にデータが保存されるコードを書きます。

function init() {
document.querySelector("#form").addEventListener("input",
    function() {
      var data = {
        name:document.querySelector("#name").value,
        category:document.querySelector("#category").value,
        strength:document.querySelector("#strength").value
      };
      localStorage.setItem("goku", JSON.stringify(data));
    }, false
  );
}

#name#category#strength のテキストフィールドが変更された時に
キーが goku 、バリューが JSON 形式に変換された data の配列?が保存されます。

本当に保存されてるかわからないので、次にデータを取り出して表示させてみましょう。

データを抽出し表示する

      ・・・・・
      localStorage.setItem("goku", JSON.stringify(data));

      var nowData = localStorage.getItem("goku");
      var realData = JSON.parse(nowData);
      val = realData.name + " " + realData.category + " " + realData.strength;
      document.querySelector("#result").innerHTML = val;
      ・・・・・

まず、 getItem でデータを取り出し、 JSON でパースします。
パースしたら .name のように、ドットの後に名前を繋げることでデータが利用できます。

フォームで試してみると↓こんな感じ。
スクリーンショット 2014-04-22 13.45.48.png

データがあるかどうかを確認して、ある場合は既存のデータを適用する

ブラウザを閉じて、再訪した時にデータをフォームに入力しておきたい。
って場合に、データの有無を確認してある場合は既存のデータをフォームに入れておくようにする。

function init() {
  var oldData = localStorage.getItem("goku");
  if(oldData) {
    var realData = JSON.parse(oldData);
    document.querySelector("#name").value = realData.name;
    document.querySelector("#category").value = realData.category;
    document.querySelector("#strength").value = realData.strength;
  }

  document.querySelector("#form").addEventListener("input",
  ・・・・・

getItem で取得し、JSON でパースする。
あとはそれぞれのフォームに値を入力する。

結論、まあ基本はキー&バリューなんで、
データベースほど使いやすくもないけど、
工夫すれば面白い使い方ができるかも。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
68
Help us understand the problem. What are the problem?