... ;
}
return self;
};
.prototype = {
// type == local ...
Этим постом я бы хотел исправиться и предложить адекватный способ работы с хранилищем, как с объектом. Код из поста «Работа с локальным хранилищем, как с объектом? Легко!» использовать крайне не рекомендую, там всё плохо (минусы изложены внизу). Цель данного — объяснить всем тем, кто добавил статью по ссылке в избранное или поставил плюсик,
никогда не использовать этот код.
Сейчас же я хочу продемонстрировать простейшую идею, предложенную 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};
Читать дальше →
