Интерфейс для работы с хранилищем

У библиотеки Webix есть собственное API для работы с хранилищами данных на клиенте (LocalStorage, SessionStorage, Cookies).

Модуль webix.storage включает в себя следующие объекты:

• webix.storage.local - для работы с объектом localStorage
• webix.storage.session - для работы с объектом sessionStorage
• webix.storage.cookie - для работы с объектом cookie.

У каждого из этих объектов есть следующие методы:

• put (name, data, [domain, expires]) - сохраняет данные в хранилище под указанным именем. Данные нужно передавать в формате JSON (два последних параметра относятся только к хранилищу Cookie)
• get (name) - извлекает данные под указанным именем из хранилища. Данные приходят в формате JSON
• clear - полностью очищает хранилище
• remove (name, [domain]) - удаляет данные под указанным именем из хранилища (последний параметр относится только к хранилищу Cookie).

У модуля storage.cookie есть еще один метод:

• getRaw (string) - извлекает данные из хранилища Cookie по указанному ключу.

Стоит учитывать, что метод возвращает необработанную строку. Если нужно получить JSON объект, используйте метод get method.

Работа с Local Storage

Local Storage позволяет хранить любую информацию приложения, в том числе и текущее состояние компонента, полученное методом getState().

С помощью метода put() вы можете сохранить состояние (а точнее JSON объект, возвращенный методом getState() компонента) в Local Storage под любым именем.

function save_state(){
    webix.storage.local.put("state", grid.getState());
}

Если данные находятся в обычном JavaScript объекте, то перед сохранением в Local Storage их нужно перевести в JSON формат. Сделать это можно при помощи метода serialize().

С помощью метода get() вы можете извлечь данные из Local Storage. Метод принимает имя, под которым хранится JSON объект с данными.

function restore_state(){
    var state = webix.storage.local.get("state");
    if (state)
        grid.setState(state);
}

Related sample:  DataTable State Object:Session

Как сохранить данные через прокси

Помимо готовых решений библиотеки Webix для сохранения данных, вы можете создать собственный прокси объект для работы приложения в offline режиме. Для этого нужно определить объект, как значение свойства url компонента:

webix.ui({
    view:"datatable", 
    //другие настройки
    url:{   
        $proxy: true,   
        load: function(view) { //сохраняет данные после редактирования  
            view.attachEvent("onAfterEditStop", function(){
                webix.storage.local.put("app_data", this.serialize());
            });
            view.load("data/data.json", {
                success: function(text){ //обновляет данные в хранилище   
                    webix.storage.local.put("app_data", text)
                },          
                error: function(){ //срабатывает в режиме offline
                    view.parse(webix.storage.local.get("app_data"));            
                }       
            }); 
        }
    } 
});

• событие onAfterEditStop мы используем для того, чтобы сохранить данные в хранилище сразу после их редактирования
• у сохраненных данных линейная структура. Поэтому, мы их парсим в компонент, а не загружаем.

Как сохранить данные под уникальным именем

У модуля webix.storage есть специальный метод prefix(), который позволяет сохранять данные под уникальным именем. Метод добавляет специальный префикс к каждому названию, под которым сохраняются данные.

Метод принимает два параметра:

• scope - id хранилища
• storage - объект нужного хранилища.

mystore = webix.storage.prefix("app_id", webix.storage.local);
//сохраняем данные в Local Storage под именем "app_id_session_key"
mystore.put("session_key", 12)
mystore.get("session_key") //извлекаем данные из Local Storage
// -> 12

Наверх