Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 3:

HTML5. Хранение данных на стороне клиента

Шаг 3

Нами уже были перечислены необходимые функции. Рассмотрим подробнее создание каждой из них.

Сохранение новой записи:

function saveNote()
{  
  var name = document.getElementById('notename').value;
   /* создание переменной, хранящей значение введенное в поле Наименование.*/
  var content = document.getElementById('notecontent').value;
   /* создание переменной для хранения текста самой записи*/
  if(content == '')
  {
    alert('enter valid note text');
     /* выводим предупреждающее сообщение, в случае, если не задан текст записи, см. рис. 4*/
  }
  else 
  {
   if (name == 0)
    {
      alert('enter valid note name');
       /* выводим предупреждающее сообщение, если не задано наименование записи, см. рис. 5*/
    }
    else {localStorage[name] = content;}
     /* создание записи в localStorage, обратите внимание, что наименование 
        записи является идентификатором, по которому сможем извлечь текст записи*/
/*Также отметим, что если пользователь выберет уже существующую запись и введет
  новый текст, без изменения наименования, то, по сути, произойдет редактирование
  записи, поскольку новое значение текста сохранится поверх старого, соответственно,
  если будет изменено наименование записи, то, фактически, произойдет создание новой*/
  } 
19.10.
Сообщение о некорректном значении текста записи

Рис. 19.4. Сообщение о некорректном значении текста записи
Сообщение о некорректном значении наименования записи

Рис. 19.5. Сообщение о некорректном значении наименования записи

Теперь, рассмотрим функцию формирования списка записей:

function listLoad()
{
  var list = document.getElementById('notelist');
   /* получаем доступ к элементу - списку нашей веб - страницы*/
  for(var i in localStorage)
   /* цикл для перебора каждого значения, сохраненного в localStorage,
    при этом i, принимает значение идентификатора хранимых данных, т.е., в нашем 
    примере, переменная i содержит наименование записи*/
  {
   var a = document.createElement('a'); /* создаем новый html - */
   a.setAttribute('onclick', "loadNote('"+i+"'); return false;");
    /*определяем атрибут onclick, при клике, в нашем случае, вызовется функция 
    loadNote с параметром Наименования записи*/
   a.innerText = i;
    /* задаем значение текста ссылки эквивалентным наименованию записи*/
   var element = document.createElement('li');
    /* создаем новый html - элемент, а именно пункт списка*/
   element.appendChild(a);
    /* добавляем пункту списка дочерний элемент – ссылку*/
   list.appendChild(element);
    /* добавляем списку дочерний элемент – пункт списка*/
  }   
19.11.

В листинге 19.11 задаются параметры вызова функции загрузки записи по клику на ссылке, рассмотрим эту функцию:

function loadNote(v)
{
  document.getElementById('notecontent').value = localStorage[v];
   /*выводим в текстовое поле текст записи*/
  document.getElementById('notename').value = v;
   /* выводим в поле наименование записи*/
}
19.12.

Осталось только написать функцию для удаления записи из localStorage:

function deleteNote()
{
  var name = document.getElementById('notename').value;
   /*получаем значение наименования текущей записи из текстового поля*/
  if (name != '')
  {
  localStorage.removeItem(name);
   /*удаление записи, в качестве идентификатора записи используется ее наименование*/
  }
  else {alert('note not found');}
   /* сообщение, выдаваемое при попытке удалить неопределенную запись*/
}
19.13.

Задание можно считать выполненным.

Результат выполнения заданий представлен на рисунках 19.6 - 19.9 .

Создание записи

Рис. 19.6. Создание записи
Результат сохранения записи 1

Рис. 19.7. Результат сохранения записи 1
Создано несколько записей, в том числе запись 3 для удаления

Рис. 19.8. Создано несколько записей, в том числе запись 3 для удаления
Результат удаления записи 3

Рис. 19.9. Результат удаления записи 3

С дополнительными материалами по теме можно ознакомиться в списке материалов для самостоятельного изучения "HTML5. Основы разметки" .

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Владимир Харитонов
Владимир Харитонов
Россия, Петрозаводск, Карельский государственный педагогический университет, 2002
Евгений Зиновьев
Евгений Зиновьев
Россия, Белгород, Белгородский государственный технологический университет им. В.Г. Шухова, 2005