Удаление данных

Удаление данных.

Элементы в хранилище можно создавать, считывать и, разумеется, удалять из хранилища. Для выполнения последней задачи предназначены два метода:

- 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 сохраняет данные, созданные в окне, только на протяжении одного сеанса, то есть до закрытия окна. Это полезно, например, для управления содержимым корзины в интернет-магазине, а также для построения любых других приложений, требующих сохранения данных на короткое время.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *