Событие storage

Объект localStorage предоставляет информацию всем окнам, в которых выполняется одно и то же приложение, из-за чего возникают сразу две проблемы: возможность обмена сообщениями между окнами и обновления информации в окне, которое в данный момент неактивно. Для решения обеих проблем в спецификацию добавили событие storage. Оно срабатывает в окне каждый раз, когда в пространстве хранилища происходит изменение. Его можно использовать для информирования всех окон, где открыто одно и то же приложение, об изменении данных в хранилище. В этом случае отреагировать соответствующим образом смогут все окна.

Листинг 10.8. Прослушивание события storage и автоматическое обновление списка элементов

Function initiate(){

Var button=document. getElementById(‘save’); button. addEventListener(‘click’, newitem, false); window. addEventListener("storage", show, false);

Show();

}

Function newitem(){

Var keyword=document. getElementById(‘keyword’).value; var value=document. getElementById(‘text’).value;

LocalStorage. setItem(keyword, value);

Show();

Document. getElementById(‘keyword’).value=»;

Document. getElementById(‘text’).value=»;

}

Function show(){

Var databox=document. getElementById(‘databox’); databox. innerHTML=»; for(var f=0;f<localStorage. length;f++){ var keyword=localStorage. key(f);

Var value=localStorage. getItem(keyword); databox. innerHTML+='<div>’+keyword+’ — ‘+value+'</div>’;

}

}

Window. addEventListener(‘load’, initiate, false);

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