Storage

Хотя куки позволяют сохранять информацию, они имеют ряд ограничений. Например, браузер имеет ограничения на размер куков - каждая кука не может превышать 4 кб. Куки имеют срок действия, после которого удаляются. Куки являются неотъемлемой чертой протокола HTTP и при каждом запросе к серверу передаются вместе с запросом на сервер. Однако для работы с куками на стороне клиента в коде javascript не имеет значения передача куков на сервер. Кроме того, для извлечения сохраненных куков надо написать некоторую порцию кода.

В HTML5 была внедрена новая концепция для хранения данных - web storage, которая состоит из двух компонентов:

• session storage представляет временное хранилище информации, которая удаляется после закрытия браузера
• local storage представляет хранилище для данных на постоянной основе. Данные из local storage автоматически не удаляются и не имеют срока действия. Эти данные не передаются на сервер в запросе HTTP. Объем local storage составляет в разных браузерах от 5 Mб до 10 Mб

Для работы с local storage в javascript используется объект localStorage, а для работы с session storage - объект sessionStorage.

Для сохранения данных надо передать в метод setItem() объекта localStorage. В этот метод передаются два значения: ключ и значение сохраняемого объекта. Если в localStorage уже есть объект с ключом login, то его значение заменяется новым:

localStorage.setItem("login", "tom32@gmail.com");

Для получения сохраненных данных надо вызвать метод getItem(). В этот метод передается ключ объекта:

var login = localStorage.getItem("login");  //tom32@gmail.com

Чтобы удалить объект, применяется метод removeItem(), который принимает ключ удаляемого объекта:

localStorage.removeItem("login");

Для полного удаления всех объектов из localStorage можно использовать метод clear():

localStorage.clear();

С сохранением простых объектов все просто, однако при этом надо учитывать, что данные в localStorage сохраняются в виде строки. Если в данном случае не преобразовать значение к числу с помощью parseInt(), то age будет действовать как строка:

localStorage.setItem("age", 23);
var age = localStorage.getItem("age");
age=parseInt(age)+10;
document.write(age);  //33

Трудности могут возникнуть с сохранением сложных объектов:

var user ={
name: "Tom",
age: 23,
married: false
};
localStorage.setItem("user", user);
var savedUser = localStorage.getItem("user");
document.write(savedUser); //[object Object]
document.write(savedUser.name);  // undefined - savedUser - строка, а не объект

В этом случае нам надо использовать сериализацию в формат JSON:

var user ={
name: "Tom",
age: 23,
married: false
};
localStorage.setItem("user", JSON.stringify(user));
var savedUser = JSON.parse(localStorage.getItem("user"));
document.write(savedUser.name + " " + savedUser.age +" " + savedUser.married);  // Tom 23 false

В завершении надо сказать, что в некоторых браузерах с помощью специальных инструментов мы можем увидеть сохраненные объекты в local storage.