Взаимодействие с Local Storage HTML5
Ext JS 4 предоставляет специальный компонент в виде LocalStorageProxy (Ext.data.proxy.LocalStorage
), который позволяет сохранять
данные в браузере пользователя с помощью Local Storage API, которое имеется в HTML5.
Local Storage сохраняет данные в виде пары ключ-значение. А LocalStorageProxy обеспечивает взаимодействие с сохраненными данными - сохраняет и загружает из Local Storage, кроме того, выполняет их сериализацию и десериализацию.
Рассмотрим подобное взаимодействие на следующем примере:
Ext.onReady(function(){ Ext.define('User', { extend: 'Ext.data.Model', idProperty: 'id', fields: [{ name: 'id', type: 'int' }, { name: 'name', type: 'string' }, { name: 'email', type: 'string' }], proxy: { type: 'localstorage', id: 'settings' } }); var settings = Ext.create('User', { id: 1, name: 'Eugene22', email: 'eugene225@mail.ru' }); //сохранение данных settings.save(); // их загрузка из Local Storage User.load(1, { callback: function(model, operation){ alert ('Ник:' + model.get('name')); alert('Электронная почта:' + model.get('email')); } }); });
Чтобы взаимодействовать с локальным хранилищем, устанавливаем соответствующие настройки для параметра proxy у модели:
proxy: { type: 'localstorage', id: 'settings' }
Установка type: 'localstorage'
подразумевает возможное сохранение объектов данной модели в Local Storage. Настройка
id: 'settings'
устанавливает ключ, по которому объекты будут сохраняться в локальном хранилище. Если в будущем мы сохраним
несколько таких объектов, то к этому ключу будет добавляться id объекта, который мы будем устанавливать в поле модели id
.
Далее мы создаем один объект такой модели и сохраняем в локальном хранилище с помощью метода save
:
var settings = Ext.create('User', { id: 1, name: 'Eugene22', email: 'eugene225@mail.ru' }); //сохранение данных settings.save();
Для последующей выгрузки данных из локального хранилища браузера в скрипт Ext JS нам надо использовать метод load
модели:
User.load(1, { callback: function(model, operation){ alert ('Ник:' + model.get('name')); alert('Электронная почта:' + model.get('email')); } });
В качестве первого параметра метода передается id объекта данной модели. Затем он соединяется с id, указанным в прокси модели и по получившемуся ключу происходит извлечение объекта (то есть "settings" + "1" в данном случае).
В качестве второго параметра выступает функция, вызывающаяся при извлечении объекта. С помощью первого параметра - model мы можем получить извлеченный из локального хранилища объект.