JSFiddle - React, Tailwind, and code Playground
JavaScript
localStorage.clear();
( function() {
// объект, который будет хранить данные, пока окно браузера не перезагрузят
// берем данные из хранилища в виде json и парсим их
var _objectLocalStorage = JSON.parse( localStorage.getItem( 'objectStorage' ) ) || {};
// определяем объект с именем objectLocalStorage в window и добавляем ему геттер и сеттер
// во избежание недоразумений, мы не трогаем localStorage, он каким был, тактим остаётся
Object.defineProperty( window, 'objectLocalStorage', {
get: function() {
// для сохранения объекта после присваивания
setTimeout( function(){
var stringified = JSON.stringify( _objectLocalStorage );
// некое подобие оптимизации: если данные в объекте не изменились,
// значит присваивания никакого не было, сработал обычный гет
if( stringified !== localStorage.getItem( 'objectStorage' ) ) {
// сохраняем
localStorage.setItem( 'objectStorage', stringified );
}
},0);
return _objectLocalStorage;
},
// на случай, если objectLocalStorage присвоили целый объект
set: function( v ) {
_objectLocalStorage = v;
localStorage.setItem( 'objectStorage', JSON.stringify( _objectLocalStorage ) );
}
} );
})();
console.log(JSON.stringify(objectLocalStorage), localStorage.objectStorage);
objectLocalStorage = { a: 4, c: {} };
console.log(JSON.stringify(objectLocalStorage) === localStorage.objectStorage);
objectLocalStorage.b = {};
console.log(JSON.stringify(objectLocalStorage) === localStorage.objectStorage); // ??
objectLocalStorage.c.d = 200;
console.log(JSON.stringify(objectLocalStorage) === localStorage.objectStorage);// ??
objectLocalStorage.b.c = 200;
console.log(JSON.stringify(objectLocalStorage) === localStorage.objectStorage);// ??