Как хранить постоянные данные на стороне клиента

Question

Мне нужно программно хранить данные на стороне клиента без необходимости передавать данные с сервера при каждой загрузке страницы. Я подумал о создании динамического файла JavaScript с необходимыми данными для текущего сеанса пользователя и убедитесь, что он кешируется, но это выглядит очень грязно и у такого подхода есть несколько недостатков.

Как я могу хранить постоянные данные на стороне клиента?

Answer 1

Вы можете хранить данные в window.name, который может содержать до 2 МБ данных (!).

/* on page 1 */
window.name = "Bla bla bla";

/* on page 2 */
alert(window.name); // alerts "Bla bla bla"

Редактировать: Также взгляните на эту статью на Ajaxian относительно этого.

Обратите внимание, что другие сайты в той же вкладке / окне также имеют доступ к window.name, поэтому вы не должны хранить здесь ничего конфиденциального.

Answer 2

Вы можете использовать API веб-хранилища (Window.localStorage или Window.sessionStorage). Проверьте эту статью на html5doctor для более подробного объяснения. API веб-хранилища на данный момент поддерживается всеми современными браузерами .

Свойство localStorage, доступное только для чтения, позволяет получить доступ к объекту хранилища для источника документа; сохраненные данные сохраняются между сеансами браузера . localStorage похож на sessionStorage, за исключением того, что, хотя данные, хранящиеся в localStorage, не имеют срока действия, данные, хранящиеся в sessionStorage, очищаются, когда сеанс страницы заканчивается - то есть, когда страница закрыта. ^{https://developer.mozilla.org/en/docs/Web/API/Window/localStorage}

Как выделено выше:

• Чтобы хранить данные неограниченное время (до очистки кеша), используйте Window.localStorage.
• Чтобы сохранить данные до закрытия окна, используйте Window.sessionStorage.

Существует два метода установки и получения свойств с помощью API Window.localStorage и Window.sessionStorage:

1. Доступ к свойствам напрямую:

   localStorage.name = 'ashes999';
   console.log(localStorage.name); // ashes999
   delete localStorage.name;
   console.log(localStorage.name); // undefined
   

   sessionStorage.name = 'ashes999';
   console.log(sessionStorage.name); // ashes999
   delete sessionStorage.name;
   console.log(sessionStorage.name); // undefined
   

2. Используйте методы API Storage.setItem, Storage.getItem и Storage.removeItem.

   localStorage.setItem('name', 'ashes999');
   console.log(localStorage.getItem('name')); // ashes999
   localStorage.removeItem('name');
   console.log(localStorage.getItem('name')); // undefined
   

   sessionStorage.setItem('name', 'ashes999');
   console.log(sessionStorage.getItem('name')); // ashes999
   sessionStorage.removeItem('name');
   console.log(sessionStorage.getItem('name')); // undefined
   

Предостережения:

• Браузеры могут налагать ограничения на емкость хранилища для каждого источника API веб-хранилища , но вы должны быть в безопасности до 5 МБ.
• API веб-хранилища ограничен той же политикой происхождения.
• Доступ к веб-хранилищу из сторонних IFrames запрещен, если пользователь отключил сторонние файлы cookie в Firefox

Answer 3

Если вам действительно нужно это сделать (и я определенно сомневаюсь, что это хорошая идея), ваша идея с дополнительными файлами JavaScript не так плоха, как вы думаете , Просто используйте нотацию JSON для хранения данных, и ее довольно легко загружать и выгружать по мере необходимости. Если вы придерживаетесь некоторых хорошо продуманных логических разделов, вы также сможете обновлять только некоторые его части по требованию.

Answer 4

А как насчет Google Gears. Это сделано для автономного хранения, но я думаю, что это может работать. http://code.google.com/apis/gears/design.html

Из документации:

Хранение данных пользователя

Приложения, которые больше, чем просто статические файлы имеют данные, которые обычно хранится на сервере. За приложение будет полезно в автономном режиме, эти данные должны быть доступны локально. Модуль базы данных обеспечивает реляционная база данных для хранения данных. На странице архитектуры вы найдете обсуждение стратегий для проектирование локального хранилища, что ваш потребности приложения.

Когда автономное приложение переподключение, вам нужно будет синхронизировать любые изменения, сделанные в локальная база данных с сервером. Там много разных подходов к синхронизации данных, а там нет единый идеальный подход. Страница архитектуры описывает некоторые стратегии для синхронизации.

Дополнительная функция Gears база данных - полнотекстовый поиск, предоставляя быстрый способ поиска текста в файле базы данных. Прочитайте подробности здесь.