Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 19863 / 2061 | Оценка: 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.

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

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

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

 

Константин Моренко
Константин Моренко
Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989