Элементы в хранилище можно создавать, считывать и, разумеется, удалять из хранилища. Для выполнения последней задачи предназначены два метода:
— removeItem(key). Удаляет один элемент. Для идентификации элемента методу нужно передать ключевое слово, которое использовалось в методе setItem() при создании элемента;
— clear(). Очищает пространство хранилища. Удаляются все находящиеся в нем элементы.
Листинг10.6.Удаление элементов
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;
SessionStorage. setItem(keyword, value);
Show();
Document. getElementById(‘keyword’).value=»;
Document. getElementById(‘text’).value=»;
}
Function show(){
Var databox=document. getElementById(‘databox’); databox. innerHTML='<div><button onclick="removeAll()">удaлить Bce</button></div>’;
For(var f=0;f<sessionStorage. length;f++){ var keyword=sessionStorage. key(f); var value=sessionStorage. getItem(keyword); databox. innerHTML+='<div>’+keyword+’ — ‘+ value+'<br><button onclick="remove(»+keyword+») ">удaлить</button></div>’;
}
}
Function remove(keyword){ if(confirm(‘Bbi уверены?’)){
SessionStorage. removeltem(keyword);
Show();
}
}
Function removeAll(){
If(confirm(‘Bbi уверены?’)){ sessionStorage. clear(); show();
}
}
Window. addEventListener(‘load’, initiate, false);
Функции initiate() и newitem() в листинге 10.6 ничем не отличаются от аналогичных функций в предыдущих примерах кода. Изменилась только функция show(): теперь она включает в себя обработчик события onclick, который вызывает функции, удаляющие отдельный элемент или все элементы хранилища. Список элементов строится точно так же, как раньше, но на этот раз к каждому элементу добавляется кнопка Удалить. Кроме того, вверху списка создается еще одна кнопка, позволяющая полностью очистить хранилище.
За удаление выбранного элемента и полную очистку хранилища отвечают функции remove() и removeAll() соответственно. Каждая из этих функций в конце вызывает функцию show() для обновления списка элементов на экране.
Используя код из листинга 10.6, вы можете протестировать обработку информации объектом sessionStorage. Откройте шаблон из листинга 10.1 в своем браузере, создайте несколько элементов, а затем снова откройте тот же шаблон, но в другом окне. Содержимое окон будет различаться: в первом окне сохранятся созданные вами элементы, а пространство хранилища для второго окна будет пустым. В отличие от других систем (таких, как файлы cookie), при использовании объекта sessionStorage каждое окно считается независимым экземпляром приложения, и информация о сеансе никогда не выходит за пределы одного окна.
Система sessionStorage сохраняет данные, созданные в окне, только на протяжении одного сеанса, то есть до закрытия окна. Это полезно, например, для управления содержимым корзины в интернет-магазине, а также для построения любых других приложений, требующих сохранения данных на короткое время.
Добавить комментарий