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

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

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

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

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

#Session Storage

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

```html
<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>
```

```html
<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と同様にデーターとデーターを参照するためのキーで構成されています。
使用方法は、以下になります。

```html
<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>
```

```html
<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`とは、使用方法が異なります。

```js
    // データーベースの作成
    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 = "";
        });
    }
```

```html
<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`より難易度が上がりますが、リレーショナルデーターベースの機能を使用することができるため、より高度な処理を行うことも可能です。


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