[Monaca] ストレージの利用について

Monacaで開発するアプリでは、アプリ内にデーターを保持するための仕組みとして、幾つかの方法があります。

Monacaでは、WebViewを利用してアプリが動作しているため、下記を利用することができます。

名前	有効期間	説明
Session Storage	ウィンドウやタブを閉じるまで有効	データーとデーターを参照するためのキーで構成されています。 Android、iOSで利用できます。
Local Storage	永続的に有効	データーとデーターを参照するためのキーで構成されています。 Android、iOSで利用できます。
Web SQL	永続的に有効	SQLが利用できるデーターベースです。 2010年からHTML5の仕様から外れましたが、現在も多くのAndroid、iOSで利用することができます。
Indexed DB	永続的に有効	Web SQLに代わるデーターベースです。 Android4.4以降、iOS8以降で利用できます。
ファイルシステム	永続的に有効	CordovaのFileプラグインを利用することで、アプリが利用できる領域に対し、ファイル操作ができます。

今回は、この中のSession Storage、Local Storage、Web SQLについて説明します。

#Session Storage

Session Storageは、データーとデーターを参照するためのキーで構成されています。
使用方法は、以下になります。

<script>
    var KEY = "key1";
    
    // セッションストレージをセットします。
    function sessionStorageSetItem() {
        var obj = { url: "https://monaca.io"}
        sessionStorage.setItem(KEY, JSON.stringify(obj));
        alert("SessionStorage: データーをセットしました。")
    }
    
    // セッションストレージの値を取得します。
    function sessionStorageGetItem() {
        var item = sessionStorage.getItem(KEY);
        var obj = JSON.parse(item);
        document.getElementById("content").innerHTML = "url: " + obj.url;
    }
    
    // セッションストレージの指定されたキー名のデータを消去します。
    function sessionStorageRemoveItem() {
        sessionStorage.removeItem(KEY);
        document.getElementById("content").innerHTML = "";
    }

    // セッションストレージの全データを消去します。
    function sessionStorageClear() {
        sessionStorage.clear();
        document.getElementById("content").innerHTML = "";
    }
</script>

<input type="button" value="sessionStorage.setItem" onclick="sessionStorageSetItem();" />
<input type="button" value="sessionStorage.getItem" onclick="sessionStorageGetItem();" />
<input type="button" value="sessionStorage.removeItem" onclick="sessionStorageRemoveItem();" />
<input type="button" value="sessionStorage.clear" onclick="sessionStorageClear();" />

<div id="content"></div>

このように、キーとデーターをセットにすることで、端末内にデーターをセットすることができます。

#Local Storage

Local StorageもSession Storageと同様にデーターとデーターを参照するためのキーで構成されています。
使用方法は、以下になります。

<script>
    var KEY = "key1";
    
    // ローカルストレージをセットします。
    function localStorageSetItem() {
        var obj = { url: "https://monaca.io"}
        localStorage.setItem(KEY, JSON.stringify(obj));
        alert("Local Storage: データーをセットしました。")
    }
    
    // ローカルストレージの値を取得します。。
    function localStorageGetItem() {
        var item = localStorage.getItem(KEY);
        var obj = JSON.parse(item);
        document.getElementById("content").innerHTML = "url: " + obj.url;
    }
    
    // ローカルストレージの指定されたキー名のデータを消去します。
    function localStorageRemoveItem() {
        localStorage.removeItem(KEY);
        document.getElementById("content").innerHTML = "";
    }

    // ローカルストレージの全データを消去します。
    function localStorageClear() {
        localStorage.clear();
        document.getElementById("content").innerHTML = "";
    }
</script>

<input type="button" value="localStorage.setItem" onclick="localStorageSetItem();" />
<input type="button" value="localStorage.getItem" onclick="localStorageGetItem();" />
<input type="button" value="localStorage.removeItem" onclick="localStorageRemoveItem();" />
<input type="button" value="localStorage.clear" onclick="localStorageClear();" />

<div id="content"></div>

使用方法は、Session Storageと同様です。
キーとデーターをセットにすることで、端末内にデーターをセットすることができます。

#Web SQL

Web SQLは、Session Storage、Local Storageとは、使用方法が異なります。

    // データーベースの作成
    function createDB() {
        var db = window.openDatabase("Database1", "1.0", "TestDatabase", 200000);
        db.transaction(createTable, errorCB, successCB);
    }
    
    // テーブルの作成
    function createTable(tx) {
        tx.executeSql('DROP TABLE IF EXISTS TestTable');
        tx.executeSql('CREATE TABLE IF NOT EXISTS TestTable (id unique, data)');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (1, "あいうえお")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (2, "かきくけこ")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (3, "さしすせそ")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (4, "たちつてと")');        
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (5, "なにぬねの")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (6, "はひふへほ")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (7, "まみむめも")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (8, "やいゆえよ")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (9, "らりるれろ")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (10, "わゐうゑを")');
        tx.executeSql('INSERT INTO TestTable (id, data) VALUES (11, "ん")');
    }
    
    // Success Callback
    function successCB() {
        var db = window.openDatabase("Database", "1.0", "TestDatabase", 200000);
        db.transaction(queryDB, errorCB);
    }

    // Query
    function queryDB(tx) {
        tx.executeSql('SELECT * FROM TestTable', [], querySuccess, errorCB);
    }
    
    // Query Success Callback
    function querySuccess(tx, results) {
        var len = results.rows.length;
        var text = "";
        for (var i=0; i<len; i++){
            text += "row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data+"<br/>";
        }
        document.getElementById("content").innerHTML = text;
    }

    // Error Callback
    function errorCB(err) {
        alert("Error occured while executing SQL: " + err.code);
    }
    
    // テーブルの削除
    function dropTable() {
        var db = window.openDatabase("Database1", "1.0", "TestDatabase", 200000);
        db.transaction(function(tx) {
            tx.executeSql('DROP TABLE IF EXISTS TestTable');
        }, 
        function(err) {
            alert("error: " + err.message);
        },
        function() {
            document.getElementById("content").innerHTML = "";
        });
    }

<input type="button" value="Create DB" onclick="createDB();">
<input type="button" value="Drop Table" onclick="dropTable();">

<div id="content"></div>

Web SQLの場合は、データーベースを作成する必要があるため、Session StorageやLocal Storageより難易度が上がりますが、リレーショナルデーターベースの機能を使用することができるため、より高度な処理を行うことも可能です。

アプリ内でデーターを保持したい場合は、ストレージをうまく利用することで可能になります。
一度おためしください。