Monaca 端末にデータを保存する方法

monaca_database

どーも、こんにちわ!竹石です。

いま、内定者研修でMonacaを使って、スマホアプリの開発をしていて、
データの保存方法についてちょっと調べてみたのでブログでご紹介します。

Monaca 端末にデータを保存する方法


■ Monacaでデータ保存する方法

・ SQLite

まず、パッと思いつくのはSQLiteを使ったデータの取り回しです。

(1) DB作成
(2) テーブル作成
(3) データ挿入、参照、更新、削除

http://docs.monaca.mobi/ja/tips/storage/

てな感じ。

・ localStorage

そして、もう一つはlocalStorageを使ったデータの取り回しです。

localStorageは Web Storageの機能の一つで
クッキーのようにブラウザでデータを保存できる仕組みです。

クッキーよりもデータ保存容量が大きく、データもクリアされないことから
クッキーよりも使い勝手が良いと思います。
http://www.atmarkit.co.jp/ait/articles/1108/12/news093.html

JSON形式と単一でデータを保存する方法があり、使い方も簡単ですね。
http://blog.asial.co.jp/939

データの扱いは登録、参照、削除しかできないのでSQLの集合関数とかは
使えないですが、少量のデータだったり、複雑なデータ参照条件とかがないなら
localStorageいい感じです。


■ サンプルコード

最後に、簡単なサンプルを。

– JavaScript

      function saveStorage() {
        setStorage();
        showStorage();
      }
 
      function setStorage() {
        localStorage.setItem('nameList', JSON.stringify({
                        name1: document.getElementById("nameBox").value,
                        name2: document.getElementById("nameBox2").value,
                        name3: document.getElementById("nameBox3").value
                      }));
      }
       
      function showStorage() {
        var li,text, nameList;
        clearNodes();
 
        nameList = JSON.parse(localStorage.getItem('nameList'));   
        for (var nameKey in nameList) {
          text = nameKey + " : " + nameList[nameKey];
          document.getElementById('itemArea')
              .appendChild(document.createElement('li'))
              .appendChild(document.createTextNode(text));
        }
      }
       
      function clearStorage() {
        localStorage.clear();
        showStorage();
      }
       
      function clearNodes() {
        var itemArea = document.getElementById('itemArea');
        while(itemArea.firstChild) {
          itemArea.removeChild(itemArea.firstChild);
        }
      }

– HTML

localStorageでデータ保存します

名前1
名前2
名前3

すると、こんな感じに動きます。

initial insert

■ まとめ

html5いいね!
では、また!

コメントを残す

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

ABOUTこの記事をかいた人

WEBアプリ開発をメイン業務としている。後輩エンジニアの育成リーダーとしても活躍中。社内勉強会の立ち上げなど、会社の前線でその能力を発揮している。2009年、株式会社ヘッドウォータース新卒入社。