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

Шаг 2

Чтобы страница смотрелась, создадим файл стилей и "привяжем" его к HTML - документу.

Для начала зададим цвет фона для всего документа:

body 
{
  background-color:#F7F7F7;
}

Определим выравнивание и размещение контейнера, где будет размещаться список записей:

#notes
{
  float:left;
  width:250px;
}
Выровняем контейнер с элементами управления

#note
{
  float:left;
  margin-left:20px;
}

Зададим размещение и атрибуты стиля текста для контейнера footer:

#footer
{
  clear:left;
  text-align:center;
  font-style:italic;
}

Зададим отступ для формы с элементами управления:

 
#formnote
{
  margin-top: 30px;
}

Несколько мелких правок для заголовков, текстовых полей, кнопок и ячеек таблицы:

#formnote
{
  margin-top: 30px;
}

#notecontent, #notename
{
  width:450px;
}

.notebtn
{
  text-align:center;
}

td
{
  vertical-align:top;
}
h1, h3
{
  font-style:italic;
  text-align:center;

Зададим рамку вокруг fieldset'а:

fieldset 
{
  border:1px dashed #CCC;
  padding:10px;

Немного больше внимания, чем остальным элементам, уделим надписям и формам ввода текста:

label 
{
  width:142px;
  height:32px;
  background-color:#CCCCCC;
  float:left;
  display: block;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 100%;
  letter-spacing: -1px;
  font-weight: normal;
  line-height: 1.1;
  color:#666;
}
.notefield
{
  margin-top:3px;
  margin-right:2px;
  padding-top:11px;
  padding-left:6px;
  height:32px; 
}

И наконец, для того, чтобы ссылки списка выделялись при наведении на них курсора, и чтобы текст шрифт отличался от обычного синего с подчеркивание, определим селекторы соответствующих псевдоклассов:

a:link, a:visited
{
  color:#666;
  font-style:italic;
  font-weight:500;
  text-decoration:none;
  font-family:Arial, Helvetica, sans-serif;
}

a:hover, li:hover
{
  color:#666;
  font-style:italic;
  font-weight:bolder;
  cursor: pointer;

Результатом станет веб - страница следующего вида:

Собственно, теперь можно перейти к сути работы с localStorage.

Шаг 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, обратите внимание, что наименование 
        записи является идентификатором, по которому сможем извлечь текст записи*/
/*Также отметим, что если пользователь выберет уже существующую запись и введет
  новый текст, без изменения наименования, то, по сути, произойдет редактирование
  записи, поскольку новое значение текста сохранится поверх старого, соответственно,
  если будет изменено наименование записи, то, фактически, произойдет создание новой*/
  } 

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

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 задаются параметры вызова функции загрузки записи по клику на ссылке, рассмотрим эту функцию:

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

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

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

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

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

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