Взаимодействие с 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 мы можем получить извлеченный из локального хранилища объект.