Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17106 / 1586 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 3:

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

Аннотация: В рамках данного практического занятия нами будет рассмотрен пример использования хранилищ данных на стороне пользователя

Целью практического занятия является формирование начальных навыков работы с хранилище данных на примере localStorage.

Задание

Реализовать функционал блокнота (создание записей, хранение записей, редактирование и удаление) с использованием:

  • localStorage;
  • sessionStorage.

Ход работы

В качестве примера, мы подробно рассмотрим схематичный пример по работе с хранилищами данных на стороне клиента, а именно с localStorage. Вариант задания по реализации аналогичного функционала средствами sessionStorage остается на самостоятельное выполнение.

С теорией, касающейся работы с localStorage можно ознакомиться в "HTML5. Основы разметки" настоящего курса.

Выделим задачи, которые необходимо выполнить в рамках задания:

  1. Создать контейнеры элементов:
  2. для размещения списка имеющихся записей;
  3. для размещения текстовых полей и функциональных кнопок.
  4. Стилизовать HTML - документ.
  5. Реализовать следующие функции, посредством JavaScript:
  6. формирование списка имеющихся записей;
  7. сохранение созданной записи;
  8. чтение записи;
  9. удаление записи.

Для начала условимся, что запись блокнота представляет собой пару значений {наименование записи, текст записи}.

Нам понадобится HTML - документ со следующей структурой:

Макет внешнего вида HTML - документа

Рис. 19.1. Макет внешнего вида HTML - документа

Список записей будет представлять собой нумерованный набор гиперссылок - наименований существующих записей.

Также нам понадобятся два поля для ввода значений Наименования и Текста записи, а также две кнопки - Сохранить и Удалить.

Шаг 1

Создадим HTML - разметку для нашей веб - страницы, сразу же укажем атрибуты id и class, для упрощения стилизации ряда элементов, а также наименования JavaScript - функций, там, где это необходимо:

<body onload="listLoad();">
  <div id="header">
   <h1>Пример работы с localStorage</h1>
  </div>
    
  <div id="notes">
   <h3> Список записей</h3>
   <ol id="notelist"></ol>
  </div>
  
  <div id="note">
   <form id="formnote">
    
    <fieldset>
     <table>
      <tr>
       <td><label class="notefield">Наименование
         </label></td>
       <td colspan=2>
        <input id="notename" type="text" 
          class="notefield"></input>
       </td>
      </tr>
      <tr>
       <td><label class="notefield">Текст записи
         </label></td>
       <td colspan=2>
         <textarea id="notecontent" rows=10></textarea>
       </td>
      </tr>
      
      <tr>
       <td></td>
       <td class="notebtn"><button id="save" 
         type="submit" onclick="saveNote(); "
         >Сохранить</button></td>
       <td class="notebtn"><button id="delete" 
         type="submit" onclick="deleteNote();"
         >Удалить</button></td>
      </tr>
     </table>
    </fieldset>
   </form>
  </div>
  
  <div id="footer">
   <p class="footertext">2012 г.</p>
  </div>
 </body>
19.1.

В браузере ознакомимся с результатом:

Результат выполенния шага 1

Рис. 19.2. Результат выполенния шага 1

Отметим, что нами уже заранее указаны имена функций, а именно:

  • listLoad() – функция формирующая список записей, при загрузке веб - страницы;
  • saveNote() – функция сохранения записи в localStorage;
  • deleteNote() – функция удаления записи из хранилища localStorage.

Детально функции будут рассмотрены нами на шаге 3.

Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Александра Акимова
Александра Акимова
Украина
Людмила Евсюкова
Людмила Евсюкова
Россия, Московская обл