Sencha Touchでlocal storageを扱う方法

login Formのアカウント名を記憶する方法として、local storageに保存する方法を使ってみた。

• local storageに保存するデータのモデルを定義する。
• proxyのtypeに'localstorage'を指定する。

Ext.define('LogonCache', {

    extend: 'Ext.data.Model',

    config: {

        fields: ['UserName'],

        proxy: {

            type: 'localstorage'

        }

    }

});

• loadでlocalstorage上のデータを取得する。
• store.data.lengthでデータがあるか判定。
• 今回はidがUserNameのテキストフィールドに値をセット

initialize: function () {

    var store = Ext.create('Ext.data.Store', {

        model: "LogonCache"

    });
    store.load();
    if (store.data.length > 0) {

        var UserName = store.getAt(0).get('UserName');

        Ext.getCmp('UserName').setValue(UserName);

    }
}

• ログインしたタイミングでlocal storageに値をセット
• 既存データを消去してから再設定
• store.add({フィールド名:値});でセット。今回はidがUserNameのテキストフィールドにセットした値を取得して設定。
• storeに値を設定したら、store.sync()で保存

// ログオンしたアカウント名を記憶

var store = Ext.create('Ext.data.Store', {

    model: "LogonCache"

});

store.load(); // 取得

store.removeAll(); // 既存データの削除

store.add({ UserName: Ext.getCmp('UserName').getValue() }); // ログインしたアカウント名を設定

store.sync(); // 保存

iOSの場合、ここで保存した値は、「設定→Safari→詳細→Webサイトデータ」に表示される。
削除する場合はこの画面で編集をタップして削除する。