Работа с локальным хранилищем, как с объектом? Легко!

[Ganesh]

Асинхронно?! Ну уж нет.

[Finom]

Асинхронно только сохранение данных в localStorage. В остальном, это обычный объект.

[azproduction]

Асинхронно только сохранение данных в localStorage.

отнюдь

[Finom]

Предлагаете гадать, что вы имели в виду?

[azproduction]

Вся работа с localStorage синхронна

[Finom]

Нет, конкретно в моём скрипте сохранение данных асинхронно.

[Litiy]

И зачем??? Тем более без колбэков.

[azproduction]

Все очень хитро — это так надо jsfiddle.net/WFNPS/2/ :)

[Finom]

Кстати, я добавил переменную timer, она поможет избежать ошибок при сохранении в localStorage. То есть:

oblectLocalStorage = 1;
oblectLocalStorage = 2;

Обновляем страницу

oblectLocalStorage == 2; // true ← всегда

Спасибо Гвоздю с JavaScript.ru

[Finom]

Точнее, вот так:

oblectLocalStorage = {a:{}}
oblectLocalStorage.a.b = 1;
oblectLocalStorage.a.b = 2;

Обновляем страницу

oblectLocalStorage.a.b == 2; // true ← всегда

[KAdot]

Идея хорошая, но текущая реализация и невозможность сделать нормальную поддержку старых браузеров убивает ее на корню.

[Finom]

Мне не довольно-таки часто попадаются проекты, в которых можно забить на старые браузеры. Тем более, здесь поддерживается девятый осёл. А реализация косячная, не спорю. Но, если задача позволяет, эти косяки можно учесть.

[KAdot]

Поддерживать код, особенно новому в проекте программисту будет сложно:

objectLocalStorage.foo = 1;
objectLocalStorage.foo = 2;
console.log(objectLocalStorage.foo); // неопределенное поведение

[Finom]

Почему? Вполне определенное, вернется 2. Неопределенным оно будет только если он запросит localStorage. Для сохранения в него требуется таймаут, да и только. В остальном, поведение такое же, как и у обычного объекта. Перечитайте еще раз код, должно быть понятнее. При гете objectLocalStorage (точнее при сете в дочернем объекте) _objectLocalStorage возвращается сразу, без таймаутов.

[Finom]

Добавил в пост это замечание. Без него может быть не очень прозрачно.

[Ganesh]

ejohn.org/blog/how-javascript-timers-work/

[Ganesh]

Ну и да проблемы будут, конечно, только при повторном запросе объекта из хранилища.

[Eddy_Em]

Хорошее решение. Удобное.

Во всех современных браузерах работает? (я о последних версиях firefox, opera и chrome)

[Finom]

[azproduction]

Несколько советов:
1. localStorage может выбрасывать исключение как на чтение так и на запись. т.е. при такой реализации можно ловить баг-фантом :)
2. писать в localStorage дорого (по сравнению с объектом), читать тоже (в некоторых браузерах читать не очень дорого). т.е. при таком юзкейсе — сохранение состояния приложения с постоянным JSON.stringify будет много операций с диском. Если rps меньше раза в секунду — можно забить на это.

Поясните смысл

setTimeout( function(){
...
}, 0);

[Finom]

А смысл таков:
objectLocalStorage = { a: 4 };
objectLocalStorage.b = 5; ←
Срабатывает геттер, при этом, присваивания еще не произошло. Только по возврату (return ниже) _objectLocalStorage к ключу «b» присваивается 5. После возврата, в геттере мы ждем всего момент для того, чтоб сохранить этот объект в localStorage. Если убрать таймаут, то в хранилище попадет только { a: 4 }, но никак не { a: 4, b: 5 }.

[azproduction]

Все функции JSON.stringify localStorage.setItem localStorage.getItem включая геттер и сеттер синхронны, что там может не записаться?!

см. jsfiddle.net/9H7Wu/1/ vs jsfiddle.net/WFNPS/1/ (без таймаута)

[Finom]

habrahabr.ru/post/143597/#comment_4814301 — не туда написал.

[Finom]

console.log(JSON.stringify(objectLocalStorage) === localStorage.objectStorage); // true
console.log(JSON.stringify(objectLocalStorage) ← здесь вы вызвали геттер, в геттере значение _objectLocalStorage записалось в localStorage.

Поэтому они и равны.

jsfiddle.net/WFNPS/2/

[azproduction]

Понял идею. Не совсем честно (при некоторых случаях возможны баги т.к ожидается, что запись в LS будет синхронна), но для целей подходит jsfiddle.net/WFNPS/4/

[Scalar]

Мне кажется проще читать и писать в обычный объект, который сериализуется в LS (по таймауту и при onbeforeunload), и десериализуется при старте приложения.

[Finom]

Хм… Интересный вариант. Хотя… А если свет вырубят или БСОД наступит?

[Scalar]

document.addEventListener('onBeforeBSOD', function(){
... //save your data
});


[Finom]

Тоже неплохое решение. Только префикс «on» здесь лишний.

[AlexSam]

Тогда уже забыли и:
document.addEventListener('onBeforeTurnOffTheLights', function(){
... //save your data
});

[Finom]

document.addEventListener('onBeforeMyGufIsDead', function(){
… //save your rap
});

[creage]

У нас таким образом реализовано кеширование некоторых «тяжелых» тимплейтов на клиенте. При сериализации в LS пишем ключ, что-то типа «сериализация прошла успешно, от такой-то даты».

При попытке десериализации сперва смотрим в этот ключ — если вдруг его нет, запрашиваем кеш с сервера, и пишем в LS.

[Finom]

Я тут подумал… Этот вариант — лучший для sessionStorage. Но для localStorage всё еще сомневаюсь. Может быть сохранять данные каждые N секунд?

[Finom]

Тьфу блин, вы то же самое написали о таймауте, пора идти спать.

[devote]

А почему ты считаешь что в ИЕ ниже девятой версии не будет работать? В ИЕ8 точно будет работать, defineProperty там есть, localStorage тоже есть, defineProperty на объект window вполне работает норм. Так что в ИЕ ниже восьмой версии это не будет работать, но в ИЕ8 вполне будет пахать нормально.