localStorageを使用して端末にデータを保存する
橋本です。
今回は、Monacaのアプリケーションで、端末に永続的 なデータを保存する方法を紹介したいと思います。
Monacaはベースの技術としてPhoneGapを使用しているのですが、PhoneGapの提供するlocalStorageを使用することで、簡単にデータを端末上に保存することが可能です。
localStorageはwindowオブジェクトのプロパティなので、ソースコード上では、window.localStorageとわざわざ書かずに、localStorageとして使用することが出来ます。
localStorageは保存したい値に対してキーを指定して保存するタイプのデータベース（KVS）となっているため、データを保存する際には、保存したい値とキーを指定する必要があります。
データを取得する際には、データを保存する際に使用したキーを指定することでデータを取得することが可能となっています。
では、具体的な使い方を見ていきたいと思います。
データを保存する際には、localStorage.setItemメソッドを使います。
localStorage.setItem('Key', 'value');
保存する値は、単一の値の他に、オブジェクトや配列を指定することも可能ですが、localStorageに値を保存する際は一般的に値を文字列(JSON形式)に変換して保存します。文字列に変換する際には、JSON.stringifyメソッドを使用します。
以下、オブジェクトを文字列に変換して保存する例です。
var obj = {
a: 'a',
b: 'b',
c: 'c'
};
localStorage.setItem('obj', JSON.stringify(obj));
値を取得する際には、localStorage.getItemメソッドを使用します。
getItemメソッドには、取得したい値に対応するキーを指定します。
var obj = localStorage.getItem('obj');
localStorageに保存した値が文字列化したオブジェクト、もしくは配列の場合には、元に戻す処理が必要になります。
元に戻す場合には、JSON.parseメソッド、もしくはevalメソッドを使用します。
var str = localStorage.getItem('obj');
var obj = eval('(' + str + ')');
// var obj = JSON.parse(str);
保存した値を削除したい場合には、localStorage.removeItemメソッドを使用します。
removeItemメソッドには、削除したい値に対応するキーを指定します。
localStorage.removeItem('obj');
また、localStorageに保存されている全ての値をまとめて消去したい場合には、localStorage.clearメソッドを使用します。
localStorage.clear();
clearメソッドは全ての値を消去するメソッドとなっているので、使用する際には必要な値を消去してしまわないように注意してください。
localStorageを使用することで、DBを用意することなく、簡単にユーザのデータを端末に保存することができますので、是非試してみていただけたらと思います。
