... , это localStorage и
), получить JSON, десериализовать ...
Этим постом я бы хотел исправиться и предложить адекватный способ работы с хранилищем, как с объектом. Код из поста «Работа с локальным хранилищем, как с объектом? Легко!» использовать крайне не рекомендую, там всё плохо (минусы изложены внизу). Цель данного — объяснить всем тем, кто добавил статью по ссылке в избранное или поставил плюсик,
никогда не использовать этот код.
Сейчас же я хочу продемонстрировать простейшую идею, предложенную Scalar в комментарии.
При загрузке страницы (даже до события готовности DOM дерева) обращаемся к хранилищу (в данном случае, это localStorage и sessionStorage), получить JSON, десериализовать его и положить в какую-нибудь переменную.
localObject = JSON.parse( localStorage.getItem( '_myStorage' ) ); // "{'a':1, 'b':2}" → {a:1, b:2}
Затем, каждые N миллисекунд производить обратный процесс:
localStorage.setItem( '_myStorage', JSON.stringify( localObject ) );
При событии onbeforeunload делать то же самое.
Реализация идеи проста (уровень сложности задачи низок и доступен даже новичку). Но, не все (и я в том числе) до этого додумались.
Код конструктора ObjectStoragevar ObjectStorage = function ObjectStorage( name, duration ) {
var self,
name = name || '_objectStorage',
defaultDuration = 5000;
// дабы не плодить кучу экземпляров, использующих один и тот же ключ хранилища,
// просто возвращаем единственный с заданным именем,
// меняя только duration (если имеется)
if ( ObjectStorage.instances[ name ] ) {
self = ObjectStorage.instances[ name ];
self.duration = duration || self.duration;
} else {
self = this;
self._name = name;
self.duration = duration || defaultDuration;
self._init();
ObjectStorage.instances[ name ] = self;
}
return self;
};
ObjectStorage.instances = {};
ObjectStorage.prototype = {
// type == local || session
_save: function ( type ) {
var stringified = JSON.stringify( this[ type ] ),
storage = window[ type + 'Storage' ];
if ( storage.getItem( this._name ) !== stringified ) {
storage.setItem( this._name, stringified );
}
},
_get: function ( type ) {
this[ type ] = JSON.parse( window[ type + 'Storage' ].getItem( this._name ) ) || {};
},
_init: function () {
var self = this;
self._get( 'local' );
self._get( 'session' );
( function callee() {
self.timeoutId = setTimeout( function () {
self._save( 'local' );
callee();
}, self._duration );
})();
window.addEventListener( 'beforeunload', function () {
self._save( 'local' );
self._save( 'session' );
});
},
// на случай, если нужно удалить таймаут (clearTimeout( storage.timeoutId ))
timeoutId: null,
local: {},
session: {}
};
Использование:
var storage = new ObjectStorage;
storage.local = {a:4, b: {c:5}};
storage.session = {a:7, b: {c:8}};
b = storage.local.b;
b.c = {d:6};
Читать дальше →
Когда появился localStorage я был рад, как слон, но, ...
Хабы: Веб-разработка, JavaScript
Когда появился localStorage я был рад, как слон, но, немногим позже, после подробного изучения вопроса, я несколько разочаровался: там могут храниться только строки, а об объектах можно было забыть. Приходилось превращать их в строки для хранения, приходилось обратно конвертировать строку в объект для работы с ним, затем опять конвертировать в строку, чтоб сохранить. Не спорю, есть замечательные библиотеки, позволяющие манипулировать хранилищем максимально просто, но вызывать функции как-то не очень хотелось.
localStorage = { a: { b: 1 }, c: { d: 2 } }
localStorage.a.b = 3;
Круто было бы, не так ли?
Относительно давно, где-то около полугода назад я задался вопросом: как же, блин, сделать так, чтоб можно было работать с localStorage вообще без функций, чисто как с объектом. Challenge accepted!
Как говорит небезызвестный Геша: “Всё, я здзелал”.
Читать дальше →
