Javascript - хранение информации у клиента

В этом материале мы затронем очень интересную тему, которой касаются все веб-разработчики, кто стремиться сделать JS приложение или игру. Если нет желания прибегать к лишнему взаимодействию с сервером для хранения данных приложения или игры, тогда приходится искать иные выходы из ситуаций. Давайте их как раз и разберём.
В первую очередь, думая о хранении информации в браузере на стороне клиента хочется подумать о примитивных файлах. Однако к сожалению записывать в файлы Javascript не умеет. Поэтому никаких rewritable файлов в нашем приложении/игре быть не должно.

Тут же следует упомянуть о Cookies. Это весьма гожий способ хранения данных в браузере клиента. Из плюсов следует заметить что данные при желании моно получить и серверной стороной сайта. Из минусов это в первую очередь малый размер (имя переменной и значение не должны превышать 4кб), а также невозможность использования локально (не на домене). Вот очень удобные функции для записи и чтения ваших кукисов с помощью javascript:

function getCookie(name)
{
var begin = document.cookie.indexOf(name+'=');
if(-1 == begin) return null;
begin += name.length + 1;
end = document.cookie.indexOf('; ',begin);
if (-1 == end) end = document.cookie.length;
return document.cookie.substring(begin,end);
}

function setCookie(name, value)
{
var today = new Date();
var expiration = new Date(today.getTime() + 90 * 24 * 60 * 60 * 1000); 
document.cookie = name + '=' + value + '; path=/; expires=' + expiration.toGMTString();
}

Следующим способом хранить и читать данные у клиента с помощью JS, это использование Web SQL. Как вы поняли из названия технологии, что это база данных. Естественно, обращение к вашим таблицам, изменение данных, создание строк в Web SQL имеет свои правила и ньюансы о которых вы сможете почитать на сторонних ресурсах.

Последним самым сочным вариантом является использование Web Storage. 

Итак вот несколько способов использования технологии:

localStorage.somekey = "My data"; // Записываем данные в переменную somekey
alert(localStorage.somekey); // Получаем данные из переменной somekey
alert(localStorage['somekey']); // Другим способом получаем данные
delete localStorage.somekey; // Удаляем содержимое somekey

Также можно ещё другим способом записывать и получать данные Web Storage:

localStorage.setItem('somekey', 'value'); //Запись
alert(localStorage.getItem('somekey')); // Получение

Вы с лёгкостью можете записывать массивы JS в одну единицу хранения Web Storage:

foo = ['bar1', 'bar2', 'bar3']; //массив
localStorage.foo = JSON.stringify(foo); //Запись
foo = localStorage.foo ? JSON.parse(localStorage.foo) : []; //Восстанавливаем массив из Web Storage

Как вы сами видите всё просто и легко. В материале мы рассмотрели самые перспективные способы хранения информации на строне браузера клиента с целью использования её Javascript-кодами вашего web-приложения.


Добавить комментарий


Защитный код
Обновить

Карта сайта