Пропустить навигацию.
Главная

Хранение данных в браузере без Cookie

Storage.js

Сохраняет информацию в браузере пользователя, не используя cookie.

Сфера применения

  • Автосохранение после любого изменения, а не раз в 10 минут.
  • Сохранение параметров интерфейса без Cookies/AJAX.
  • Хочется что-то сохранить не на сервере, а в браузере

Библиотека Storage.js

  1. Не зависит от фреймворков, сжатый размер: <1k
  2. Кросс-браузерная. Для браузеров, отличных от IE/Firefox требуется Flash
  3. Открытый код, свободная лицензия

Пример использования

// сохранить
Storage.put("autosave", "Текст очень интересной статьи...")
Storage.put("interface", serializeForm())
 
// ... При повторном заходе на сайт ... 
 
// прочитать
textarea.innerHTML = Storage.get("autosave") // восстановить черновик
setupForm(Storage.get("interface"))  // восстановить форму
Storage.clear()  // очистить хранилище

Разница: Cookie/Storage.js

Cookie

  1. Старый способ
  2. Маленькие объекты
  3. Каждый запрос – летят на сервер

Browser Persistence (Storage.js)

  1. Новый способ
  2. Большие объекты
  3. Никуда не передаются

Демо »»

Все круто,

Все круто, молодец!

Версия 1.1Бета.

Версия 1.1Бета. Шлите отзывы.

У меня в IE6 не

У меня в IE6 не работает: на storage.load(namespace) выдает "Объект не поддерживает это свойство или метод"

Эта ошибка

Эта ошибка происходит в случае, когда на одной машине одновременно несколько IE, например IE6 и IE7.
Видимо, придется делать откат на Flash для IE в таких случаях.

Да, совершенно

Да, совершенно верно! Протестировал на машине с одним только IE6 - прекрасно работает.

В следующей

В следующей версии сделаю еще подгружаемый плагин для случая с несколькими IE, чтобы не засорять оптимизированный основной код библиотеки таким редким developer-only случаем.

Мдаа, а недавно

Мдаа, а недавно ковырял dojo.storage, выкусил из него FlashStorage - но он занимет в сжатом виде 15кб, а тут 2кб. Круто! И где вы раньше были :).
Обязательно поиследую вашу разработку на предмет интеграции со своей разработкой http://fullajax.ru.
Было бы не плохо списаться по аське, мои контактные данные у меня на сайте, ваших я к сожалению не нашел.

Протестировал

Протестировал немного (тестировал Флеш хранилище), вроде на первый вгляд работает хорошо, но как всегда есть недостатки:
- нет сериализации обьектов, т.е. если я хочу сохранить обьект - то ничего не получается, сохранять можно только стринг, т.е. мне надо позаботится про сериализацию обьекта, потом его обратную сборку, может есть смысл внедрить автосериализацию и десеарелизацию внутрь стораджа.
вопрос:
- что будет если обьем превысит лимит? сообщения какието?

Все

Все комментарии здесь читаю, поэтому и Ваш тоже прочитал.

Хранилище написано намеренно без излишеств. Без неймспейсов, без сериализации.
Тот, кому это надо - обязательно добавит эти компоненты сам.

Сериализаторов в JSON много, например http://www.json.org/js.html

P.S Превышение

P.S Превышение лимита не обрабатывается ;(

Скачал,

Скачал, проверил, не работает :(
1. В примере demo.html - неправильно указаны имена файлов - ссылка на каталог storage - которого нет :( исправил на правильные.
2. Проверял в 3 браузерах - Firefox 2.0.0.3, Epiphany 2.18.1 (Gecko 1.8), Opera 9.26.
3. Cистема - Ubuntu 7.04.
4. Все браузеры имеют поддержку Flash, версию не знаю, но её достаточно для просмотра видео, банеров и другого контента.
5. Переключился на использование несжатого варианта и расскомментировал alert(this.engines[i]+':<'+e.message+'>\n') чтобы видеть ошибки.
6. Первые два браузера выдают две ошибки - "WhatWG:<Security error>", а следом "userData:<No addBehavior available>". После этого, в консоли ошибок появляются строки "Javascript error in file:///home/ashtokalo/Desktop/storage/storage.uncompressed.js on line 155:
movie has no properties" если нажат на любую из кнопок на странице.
7. В Opera, так же появляются две ошибки, но после этого браузер зависает и приходиться убивать его процесс.
Что я делал не так?

Работают ли

Работают ли примеры с сайта? Т.е Демки вверху пашут ?

Что касается Opera & Linux - там проблемы вообще с Flash у меня (Gentoo). Работает ли вообще у тебя флеш?

У меня выдается

У меня выдается ошибка

A is undefined
Storage={engines:["WhatWG","userData","F...nerHTML=E;document.body.appendChild(H)};

с использованием сжатого
и

movie is undefined
[Break on this error] return movie.get(key

при использовании storage.uncompressed.js
FF 3.0RC1 Ubuntu 8.04

Забавная

Забавная багофича: при работе с несколькими браузерами flash-овое хранилище работает на несколько браузеров одновременно, а IE и FF не проверяют инфу из флеша. Не знаю, надо это или нет, просто заметил.

Если оставить только флеш, сделать событие "изменение_данных_в_хранилище" и прикрепить к нему изменение данных на странице - получим одновременное изменение данных на нескольких страницах.
Т. е. Если пользователь разлогинелся на главной, то он разлогинелся на всех остальных.

Как-то так.

Пример на сайте

Пример на сайте работает, локальный - нет. Изменения вресенные в локальный пример:
1. --->
2. Storage.swfUrl = '/storage/storage.swf' ---> Storage.swfUrl = 'storage.swf'
3. storage.js ---> storage.uncompressed.js
4. swfUrl: "/storage.swf" ---> swfUrl: "storage.swf"
5. alert(this.engines[i]+':<'+e.message+'>\n')

Алерты при старте:
1. WhatWG:"
2. "userData:"

Firebug:
При нажатии "записать значени": movie is undefined в строке movie.put(key, value)
И остальные ошибки при обращении к movie

Windows Xp sp3 / Firefox 3.0.1

Первый пункт - <

Первый пункт - < s c r i p t src="/storage/storage.js" > < / s c r i p t >

Отличная

Отличная статья. В связи с тем, что у меня недавно троянами увели куки браузера, статья очень для меня актуальна :) Спасибо буду пробовать на практике.

Теперь ты

Теперь ты хочешь чтобы у тебя их увели через флеш? =)

Верно

Верно подмечено :D