一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

localStorage使ってみた

今回はHTML5のlocalStorageを簡単に触ってみたときのことを書きたいと思います。


今回つくったものを簡単に説明すると、


1、フォームを二つ用意して、localStorageのkey, valueに当たるものをそれぞれ入力する。

2、保存ボタンを押すと、1で入力したkey, valueがlocalStorageに保存される。

3、表示ボタンを押すと、それまでに保存しておいたkey, valueの一覧を表形式で表示する。

4、削除ボタンを押すと、それまでに保存しておいたkey, valueをすべて削除する。表の中身をクリアにして自動でリロードする。


といった感じです。


こちらのsessionStorageで作られていたサンプルを、localStorageで書き直してつくりました。
(勉強になりました。ありがとうございます!!)

http://www.atmarkit.co.jp/ait/files/20110812/sessionStorage.htm


それでは早速コードのほうを!


これ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>localStorage Sample</title>
  <style>
    form{
      margin-bottom:20px;
    }
    table{
      margin-top:20px;
    }
    th{
      min-width:100px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>

    <header>
        <h1>localStorageサンプル</h1>
    </header>

    <div id="main">
      <form>
        Key:
        <input id="textkey" type="text" />
        Value:
        <input id="textdata" type="text" />
      </form>

      <button id="save_btn" >保存</button>
      <button id="display_btn" >表示</button>
      <button id="clear_btn" >全て削除</button>
     
      <table border="1">
        <tr>
          <th>key</th>
          <th>value</th>
        </tr>
        <tbody id="list"></tbody>
      </table>
    </div>


  <script type="text/javascript">
    var ls = localStorage;

    //init
    $(document).ready(viewStorage);
    

    //イベント登録
    $("#save_btn").on("click", setlocalStorage);
    $("#display_btn").on("click", viewStorage);
    $("#clear_btn").on("click", removeallStorage);


    // localStorageへの格納
    function setlocalStorage() {

      var key = $("#textkey").val();
      var value = $("#textdata").val();

      // key,valueに値が入っているかチェック
      if (key && value) {
        ls.setItem(key, value);
      }

    }

    // localStorageからのデータの取得と表示
    function viewStorage() {
      //いったん中身を空にする
      $("#list").empty();

      // localStorageすべての情報の取得
      for (var i=0; i < ls.length; i++) {
        var _key = ls.key(i);
        
        // 登録されているkey, valueを順に取得して表示
         var tr = $("<tr></tr>");
         var td1 = $("<td></td>");
         var td2 = $("<td></td>");
         $("#list").append(tr);
         tr.append(td1).append(td2);
         td1.html(_key);
         td2.html(ls.getItem(_key));
      }
    }

    // localStorageからすべて削除
    function removeallStorage() {
      ls.clear();
      location.reload();
    }

  </script>
</body>
</html>


localStorageはsetItemで値を保存して、getItemで呼び出すので、そのやり方に従ってkey,valueの保存、表示を実装しました。


もっとうまくできるかなーって思うところはkey,valueの一覧を表示するところなんですけど、これ毎回、はじめにtbodyの中身を空にしてからfor文でタグを作って値を入れていってるんです。
ちょっと美しくないなーーって思いつつも放置しているので、偉い人、アドバイスください。。


あと無駄にハマったところが一カ所あって、buttonタグのところ。

最初、formタグの中に入れていたんですけど、これだとbuttonを押した時点でデフォルトのフォームのイベントが動いちゃって「key, valueが一瞬でちらっと見えてすぐ消える…」というバグに苛まれました。

結果的にformの外にbuttonを置いたんですけど、これは単純にクリックイベントのコールバックの先頭にe.preventDefault()をいれてやれば問題ないと思います。
(今回は先に関数に名前つけちゃったのでサボりました、、すんません、、)


とまあ、こんな感じで自主的に消さない限り保存しつづけてくれるlocalStorage。

JSONに変換する工程を挟めば、objectを保存することもできるしとっても便利ですね。


ほかに似たようなものにsessionStorageもあるし、今後もどこかでお世話になる事あるだろうなーっておもいます。

またどこかで使ったときは改めてブログに書きたいと思います。


小さなことからコツコツと。