Веб-броузеры часто предлагают пользователям сохранить пароли и сохраняют их на диске в зашифрованном виде. Но ни один из механизмов хранения данных на стороне клиента, описываемый в этой главе, никак не связан с шифрованием: все, что вы будете сохранять, будет сохраняться на жестком диске в незашифрованном виде. То есть хранящиеся данные могут быть извлечены чересчур любопытным пользователем, имеющим доступ к компьютеру, или злонамеренным программным обеспечением (например, разнообразными шпионскими программами), находящимся на компьютере. По этой причине ни один из механизмов хранения данных на стороне клиента никогда не должен использоваться для хранения паролей, номеров банковских
счетов или другой конфиденциальной информации. Запомните: тот факт, что пользователь вводит какую-то информацию в поля форм при взаимодействии с вашим веб-сайтом, еще не означает, что он хочет сохранить копию этой информации на диске. Возьмите в качестве примера номер кредитной карты. Это конфиденциальная информация, которую люди предпочитают сохранять в тайне в своих бумажниках. Сохранить эту информацию с помощью механизма хранения данных на стороне клиента - это все равно что написать номер кредитной карты на бумажке и приклеить ее к клавиатуре.
Кроме того, учтите, что многие пользователи не доверяют веб-сайтам, использующим cookies или другие механизмы хранения данных на стороне клиента для целей, которые напоминают «слежение». Применяйте механизмы хранения, описываемые в этой главе, для повышения удобства работы с вашим сайтом, но не используйте их как механизм сбора конфиденциальной информации. Если появится слишком большое количество сайтов, дискредитирующих механизмы хранения данных на стороне клиента, пользователи будут отключать их или часто очищать хранилища, что сделает невозможным и их использование, и работу сайтов, опирающихся на их применение.
Броузеры, реализующие положения проекта спецификации «Web Storage», определяют в объекте
Window
два свойства:
localStorage
и
sessionStorage
. Оба свойства ссылаются на объект
Storage
– постоянно хранимый ассоциативный массив, отображающий строковые ключи в строковые значения. Объекты
Storage
действуют подобно обычным объектам в языке JavaScript: достаточно просто присвоить свойству объекта строку, и броузер автоматически сохранит ее. Разница между
localStorage
и
sessionStorage
заключается лишь в сроке хранения и области видимости: они определяют, как долго будут храниться данные и кому они будут доступны.
Ниже мы подробнее поговорим о сроке хранения и области видимости. А пока рассмотрим несколько примеров. Следующий фрагмент использует свойство
localStorage
, но он точно так же мог бы работать и со свойством
sessionStorage
:
var name = localStorage.username; // Получить сохраненное значение.
name = localStorage["username"]; // Эквивалентная форма обращения, как к массиву
if (!name) {
name = prompt("Как вас зовут?"); // Задать пользователю вопрос.
localStorage.username = name; // Сохранить ответ.
}
// Выполнить итерации по всем хранящимся парам имя/значение
for(var name in localStorage) { // Итерации по всем хранящимся именам
var value = localStorage[name]; // Получить значение для каждого из них
}
Объекты
Storage
также определяют методы для сохранения, извлечения и удаления данных. Эти методы рассматриваются в разделе 20.1.2.
Проект спецификации «Web Storage» определяет возможность сохранения структурированных данных (объектов и массивов), а также простых значений и данных встроенных типов, таких как даты, регулярные выражения и даже объекты
File
. Однако на момент написания этих строк броузеры позволяли сохранять только строки. Если потребуется сохранять и извлекать данные других типов, их можно кодировать и декодировать вручную. Например:
// При сохранении числа оно автоматически преобразуется в строку.
// Не забудьте выполнить обратное преобразование при извлечении из хранилища.
localStorage.х = 10;
var х = parseInt(localStorage.х);
// Преобразовать объект Date в строку при записи и обратно - при чтении
localStorage.lastRead = (new Date).toUTCString;
var lastRead = new Date(Date.parse(localStorage.lastRead));
// Для кодирования любых простых или структурированных данных удобно
// использовать формат JS0N
localStorage.data = JSON.stringify(data); // Закодировать и сохранить
var data = JSON.parse(localStorage.data); // Извлечь и декодировать.
20.1.1. Срок хранения и область видимости
Объекты
localStorage
и
sessionStorage
отличаются сроком хранения данных и областью видимости хранилища. Объект
localStorage
представляет долговременное хранилище данных: срок хранения не ограничен, и данные сохраняются на компьютере пользователя, пока не будут удалены веб-приложением или пока пользователь не потребует от броузера (посредством некоторого пользовательского интерфейса, предоставляемого броузером) удалить их.
Доступность данных в объекте
localStorage
ограничивается происхождением документа. Как описывалось в разделе 13.6.2, происхождение документа определяется такими параметрами, как протокол, имя хоста и номер порта, поэтому все следующие URL-адреса ссылаются на документы с разным происхождением:
http://www.example.com // Протокол: http: имя хоста: www.example.com
https://www.example.com // Другой протокол
http://static.example.com // Другое имя хоста
http://www.example.com:8000 // Другой порт
Все документы, имеющие одно и то же происхождение, будут совместно использовать одни и те же данные в объекте
localStorage
(независимо от происхождения сценария, который фактически обращается к хранилищу
localStorage
). Они смогут читать и изменять данные друг друга. Но документы с разными происхождениями никогда не смогут прочитать или изменить данные друг друга (даже если оба они будут выполнять сценарий, полученный с одного и того же стороннего сервера).