JavaScript. Подробное руководство, 6-е издание

Обратите внимание, что видимость данных в хранилище localStorage также ограничивается конкретным броузером. Если посетить сайт с помощью Firefox, а затем вновь посетить его, например, с помощью Chrome, никакие данные, сохраненные при первом посещении, не будут доступны при втором посещении.

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

Доступность данных в хранилище sessionStorage, как и в хранилище localStorage, ограничивается происхождением документа, т. е. документы с разным происхождением никогда не смогут совместно использовать одни и те же данные в sessionStorage. Но помимо этого доступность данных в хранилище sessionStorage ограничивается также окном. Если пользователь откроет в броузере две вкладки, отображающие документы с общим происхождением, эти две вкладки будут владеть разными хранилищами sessionStorage. Сценарий, выполняющийся в одной вкладке, не сможет прочитать или изменить данные, сохраненные в другой вкладке, даже если в обеих вкладках будет открыта одна и та же страница и будет выполняться один и тот же сценарий. Обратите внимание, что разграничение хранилищ sessionStorage в разных окнах касается только окон верхнего уровня. Если в одной вкладке броузера будет находиться несколько элементов <iframe> и в этих фреймах будут отображаться документы с общим происхождением, они будут совместно использовать одно и то же хранилище sessionStorage.

20.1.2. Прикладной программный интерфейс объекта Storage

Объекты localStorage и sessionStorage часто используются как обычные объекты языка JavaScript: присваивание значения свойству приводит к сохранению строки, а чтение свойства - к ее извлечению из хранилища. Но эти объекты определяют также более формальный прикладной интерфейс, основанный на методах. Сохранить значение можно с помощью метода setltem, передав ему имя и значение. Извлечь значение можно с помощью метода getltem, передав ему имя. Удалить значение можно с помощью метода removeItem, передав ему имя. (В большинстве броузеров удалить значение можно также с помощью оператора delete, как если бы оно было обычным объектом, но этот прием не работает в IE8.) Удалить все хранящиеся значения можно вызовом метода сlеаг (без аргументов). Наконец, перечислить имена всех хранящихся значений можно с помощью свойства length и метода кеу, передавая ему значения от 0 до length– 1. Ниже приводится несколько примеров использования объекта localStorage. Этот программный код с тем же успехом мог бы использовать объект sessionStorage:

  localStorage.setltem(”x", 1); // Сохранить число под именем "х"
  localStorage.getltemC'x"); // Извлечь значение
  // Перечислить все хранящиеся пары имя-значение
  for(var і = 0; і < localStorage.length; i++) { // length дает количество пар
   var name = localStorage.key(i); // Получить имя і-й пары
   var value = localStorage.getltem(name); // Получить значение этой пары
  }
  localStorage.removeltemC'x'); // Удалить элемент "х"
  localStorage.clear; // Удалить все остальные элементы

Несмотря на то что обычно удобнее сохранять и извлекать данные, обращаясь к свойствам, тем не менее иногда может потребоваться использовать эти методы. Во-первых, метод clear не имеет эквивалента и является единственным способом удаления всех пар имя/значение в объекте Storage. Аналогично метод removeltem является единственным переносимым способом удаления одной пары имя/значение, потому что IE8 не позволяет использовать оператор delete для этой цели.

Если производители броузеров реализуют все положения спецификации и позволят сохранять в объекте Storage другие объекты и массивы, появится еще одна причина использовать методы, такие как setltem и getltem. Объекты и массивы являются изменяемыми значениями, поэтому объекту Storage необходимо будет создавать копию сохраняемого значения, чтобы все последующие изменения в оригинале не коснулись хранящегося значения. Точно так же объект Storage должен будет создавать копию и при извлечении значения, чтобы никакие изменения в извлеченном значении не коснулись хранящегося значения. Когда такое копирование будет реализовано, использование интерфейса свойств может показаться запутывающим. Взгляните на следующий (гипотетический, пока броузеры не поддерживают возможность сохранения структурированных значений) фрагмент:

  localStorage.о = {х:1}; // Сохранить объект, имеющий свойство х
  localStorage.о.х =2; // Попытка установить свойство хранящегося объекта
  localStorage.о.х // => 1: свойство х не изменилось

Во второй строке в примере выше выполняется безуспешная попытка присвоить новое значение свойству хранящегося объекта, потому что интерпретатор сначала извлечет копию хранящегося объекта, присвоит свойству копии новое значение и затем удалит копию. В результате изменения не коснутся хранящегося объекта. Меньше шансов ошибиться, если использовать метод getltem:

  localStorage.getItem("о").x = 2; // He предполагает сохранение значения 2

Наконец, еще одна причина отдать предпочтение более явному прикладному интерфейсу на основе методов заключается в возможности имитировать этот прикладной интерфейс поверх других механизмов сохранения данных в броузерах, которые пока не поддерживают спецификацию «Web Storage». В следующих разделах будут представлены примеры реализации интерфейса объекта Storage с применением cookies и userData в ІE. При использовании прикладного интерфейса на основе методов можно писать программный код, который будет использовать свойство localStorage, когда оно доступно, и возвращаться к использованию других механизмов в противном случае. Такой программный код мог бы начинаться следующими строками:

  // Определить, какой механизм хранения будет использоваться
  var memory = window.localStorage ||
   (window.UserDataStorage && new UserDataStorage) || new CookieStorage;
  // Затем отыскать требуемый элемент в хранилище
  var username = memory.getltem("username");

20.1.3. События объекта Storage

При изменении данных, хранящихся в localStorage или sessionStorage, броузер генерирует событие «storage» во всех объектах Window, в которых доступны эти данные (но не в окне, где выполнялось сохранение). Если в броузере открыты две вкладки со страницами с общим происхождением и в одной из страниц производится сохранение значения в localStorage, в другой вкладке будет сгенерировано событие «storage». Не забывайте, что область видимости данных, хранящихся в sessionStorage, ограничивается окном верхнего уровня, поэтому при изменении данных в sessionStorage события «storage» будут генерироваться только при наличии нескольких фреймов. Обратите также внимание, что события «storage» генерируются, только когда содержимое хранилища действительно изменяется. Присваивание хранимому элементу его текущего значения, как и попытка удалить несуществующий элемент, не возбуждают событие.

Регистрация обработчиков события «storage» выполняется с помощью метода addEventListener (или attachEvent в IE). В большинстве броузеров для этой цели можно также использовать свойство onstorage объекта Window, но на момент написания этих строк данное свойство не поддерживалось в Firefox.

Объект события, связанный с событием «storage», имеет пять основных свойств (к сожалению, они не поддерживаются в IE8):