Объект localStorage

Надежная система для хранения данных на протяжении сеанса окна чрезвычайно полезна во многих ситуациях, но, если вы попытаетесь имитировать в Сети мощные настольные приложения, одного лишь временного хранилища данных вам будет недостаточно.

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

Эта система использует тот же интерфейс, что и sessionStorage, поэтому для localStorage можно использовать те же методы и свойства, которые

Мы изучили ранее. Для подготовки кода придется внести единственное изменение: заменить префикс session префиксом local.

Листинг 10.7. Работа с объектом localStorage

Function initiate(){

Var button=document. getElementById(‘save’); button. addEventListener(‘click’, newitem, 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);

Используя шаблон из листинга 10.1, протестируйте код из листинга 10.7. Этот код создает новый элемент с информацией, которую вы вводите в форме, и автоматически перечисляет все элементы из пространства хранилища, зарезервированного для данного приложения. Закройте браузер, а затем снова откройте HTML-файл. Вы все так же сможете видеть список элементов из хранилища.

В листинге 10.7 мы всего лишь взяли предыдущий пример кода и поменяли название объекта sessionStorage на localStorage. Теперь все

Созданные вами элементы будут сохраняться навсегда, и вы сможете обращаться к ним из других окон и даже после того, как браузер будет закрыт и снова запущен.