Считывание данных

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

— length. Возвращает число элементов, помещенных в хранилище данным приложением. Оно работает точно так же, как обычное свойство length для массивов из JavaScript, и его удобно использовать для последовательного считывания элементов;

— key(index). Элементы записываются в хранилище последовательно, и им автоматически присваиваются порядковые номера, начиная с 0. С помощью данного метода можно извлечь определенный элемент или даже всю информацию, содержащуюся в хранилище, если пройтись по нему в цикле.

Листинг 10.5. Перечисление элементов

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=»;

For(var f=0;f<sessionStorage. length;f++){ var keyword=sessionStorage. key(f); var value=sessionStorage. getItem(keyword); databox. innerHTML+='<div>’+keyword+’ — ‘+value+'</div>’;

}

}

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

Задача кода из листинга 10.5 — вывести полный список элементов из хранилища в правом поле на экране. Мы усовершенствовали функцию show(), применив свойство length и метод key(). Для этого создали цикл for, начинающийся с 0 и завершающийся порядковым номером последнего элемента из хранилища. Внутри цикла мы с помощью метода key() извлекаем ключевое слово для каждой позиции. Например, если в позиции 0 пространства хранилища находится элемент с ключевым словом «myitem», то код sessionStorage. key(0) возвращает значение «myitem». Вызывая этот метод в цикле, мы проходим по всему списку и выводим на экран ключевые слова и значения всех элементов из хранилища.

Функцию show() мы вызываем из функции initiate(). Таким образом, она выводит список элементов из хранилища на экран сразу же, как только вы запускаете приложение.

Вы можете воспользоваться функциональностью API Forms (Формы), о котором говорилось в главе 6, и реализовать проверку содержимого полей формы ввода, для того чтобы не допустить отправки на сервер неправильно заполненных или пустых элементов.