Posted at

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

More than 1 year has passed since last update.

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

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

一度おためしください。