HTML5. Для профессионалов. 2-е изд

Все привет. У нас вышло 2-е издание книги Гоше «HTML5. Для профессионалов».



Прототип: HTML5 for Masterminds, 2nd Edition: How to take advantage of HTML5 to create amazing websites and revolutionary applicat

Книга поможет вам получить необходимые знания об этом стандарте и освоить сложные темы, включенные в спецификации HTML5. Вы узнаете, как организовать ваши документы с HTML5, как оформлять их стилями с помощью CSS3 и как работать с самыми продвинутыми JavaScript API. Данное издание не является введением в HTML5, а представляет собой полноценный учебный курс, который научит вас создавать с помощью HTML5 современные сайты и веб-приложения. Каждая глава посвящена определенной ключевой теме HTML5, также рассмотрены сложные вопросы HTML5, CSS3 и JavaScript. Книга содержит множество примеров программного кода, благодаря чему вы сможете легко усвоить и применить знания по каждому тегу, стилю и функции, включенным в спецификации HTML5. В новое издание книги добавлено описание всех рассматриваемых языков и технологий программирования, а также включено девять новых глав.

14 Глава книги: ''API веб-хранилища''

Две системы хранения

  Первоначально Сеть рассматривалась как средство отображения статической информации. Обработкой данных занялись позже: сначала с помощью серверных приложений, а затем также с использованием малопроизводительных сценариев и встраиваемых модулей на пользовательских компьютерах. Тем не менее суть процессов оставалась неизменной: данные подготавливались на сервере и только после этого отображались на компьютере пользователя. Тяжелая работа почти всегда выполнялась на серверной стороне, так как система не располагала возможностями для того, чтобы задействовать ресурсы клиентского компьютера.

  Благодаря спецификации HTML5 ситуация уравновесилась. Ориентируясь на особенности мобильных устройств, появление облачных вычислений и необходимость стандартизировать технологии и инновации, внедряемые в течение многих лет посредством встраиваемых модулей, разработчики HTML5 объединили в одной спецификации всю функциональность, позволяющую выполнять полноценные приложения на стороне клиента.
  Одна из самых востребованных возможностей любого приложения — хранение данных и обращение к ним по мере необходимости, но у веб-приложений не было эффективного механизма, позволяющего сделать это. Для хранения небольших порций информации на клиентской стороне использовались файлы cookie, однако их природа такова, что они поддерживают запись лишь коротких строк и применять их удобно далеко не во всех ситуациях.

  API Web Storage (веб-хранилище) — это, по сути, следующая ступень развития файлов cookie. Этот API позволяет записывать данные на жесткий диск пользователя и обращаться к ним так же, как это делается в настольных приложениях. Процессы сохранения и извлечения данных, поддерживаемые этим API, применимы в двух ситуациях: когда информация должна быть доступна только в течение одного сеанса и когда ее необходимо сохранить надолго — до тех пор, пока пользователь сам не удалит ее. Таким образом, для упрощения жизни разработчиков этот API разделили на две части — sessionStorage и localStorage:

• sessionStorage. Это механизм хранения, удерживающий данные только на протяжении сеанса одной страницы. В действительности, в отличие от настоящих сеансов, здесь речь идет об информации, доступ к которой есть только у одного окна или вкладки браузера, причем как только окно или вкладка закрывается, эта информация удаляется. В спецификации используется термин «сеанс», поскольку информация сохраняется даже при обновлении содержимого окна, а также в случае, когда пользователь открывает новую страницу того же веб-сайта;
• localStorage. Этот механизм работает аналогично системам хранения для настольных приложений. Данные записываются навсегда, и приложение, сохранившее их, может обращаться к этой информации в любой момент.

  Оба механизма работают через один и тот же интерфейс и предлагают одинаковые методы и свойства. Кроме того, оба механизма завязаны на источник, то есть любая информация в хранилище доступна только через тот веб-сайт, который ее создал. У каждого веб-сайта есть собственное пространство хранилища, которое в зависимости от используемого механизма очищается при закрытии окна или не очищается никогда.
  В этом API существует четкое разграничение временных и постоянных данных, благодаря чему становится намного проще конструировать как небольшие приложения, требующие временного хранения всего нескольких строк (например, содержимого корзины в интернет-магазине), так и объемные и сложные приложения, в которых нередко возникает необходимость сохранять на неопределенное время целые документы.

sessionStorage

  Первая составляющая API, sessionStorage, заменяет собой сеансовые файлы cookie. Файлы cookie, так же как и sessionStorage, сохраняют данные ограниченное время. Однако если файлы cookie привязываются к браузеру, то объекты sessionStorage привязываются к конкретным окнам или вкладкам. Это означает, что к файлам cookie, созданным для определенного сеанса, можно обращаться до тех пор, пока хотя бы одно окно браузера открыто, но данные, создаваемые sessionStorage, доступны только до момента закрытия окна (и обращаться к ним могут только конкретные окно или вкладка).

Реализация хранения данных

  Поскольку обе системы, sessionStorage и localStorage, работают с одним и тем же интерфейсом, для тестирования примеров кода и экспериментов с API нам будет достаточно одного HTML-документа и простой формы.

14.1. HTML-документ для API хранения

<!DOCTYPE html>
<html lang="ru">
<head>
<title>API веб-хранилища</title>
<link rel="stylesheet" href="storage.css">
<script src="storage.js"></script>
</head>
<body>
<section id="formbox">
     <form name="form">
        <label for="keyword">Keyword: </label><br>
        <input type="text" name="keyword" id="keyword"><br>
        <label for="text">Value: </label><br>
        <textarea name="text" id="text"></textarea><br>
        <input type="button" id="save" value="Save">
     </form>
   </section>
   <section id="databox">
       Информация недоступна
   </section>
</body>
</html>

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

14.2. Стили для блоков

#formbox{
   float: left;
   padding: 20px;
   border: 1px solid #999999;
}
#databox{
    float: left;
    width: 400px;
    margin-left: 20px;
    padding: 20px;
    border: 1px solid #999999;
}
#keyword, #text{
    width: 200px;
}
#databox > div{
    padding: 5px;
    border-bottom: 1px solid #999999;
}

Создание данных

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

  Для создания записей и их извлечения из пространства хранилища предназначены два новых метода, применяемые только в этом API:

• setItem(key, value). Для того чтобы создать запись, нужно вызвать этот метод. Запись создается с ключевым словом и значением, переданными в качестве аргументов метода. Если в хранилище уже есть запись с таким ключевым словом, то ему присваивается новое значение, таким образом, данный метод позволяет модифицировать данные;
• getItem(key). Для извлечения значения из хранилища необходимо вызвать этот метод, передав ему ключевое слово нужной записи. Ключевое слово должно совпадать с тем, которое было объявлено при создании элемента методом setItem().

14.3. Сохранение и извлечение данных

function initiate(){
   var button = document.getElementById('save');
   button.addEventListener('click', newitem);
}
function newitem(){
   var keyword = document.getElementById('keyword').value;
   var value = document.getElementById('text').value;
  sessionStorage.setItem(keyword, value);

  show(keyword);
}
function show(keyword){
   var databox = document.getElementById('databox');
   var value = sessionStorage.getItem(keyword);
   databox.innerHTML = '<div>' + keyword + ' - ' + value + '</div>';
}
addEventListener('load', initiate);

  Процесс чрезвычайно прост. Эти методы входят в объект sessionStorage, а синтаксис их вызова всегда одинаков: sessionStorage.method(). В коде из листинга 14.3 функция newitem() выполняется каждый раз, когда пользователь нажимает на кнопку Save формы. Эта функция создает запись и добавляет в нее информацию, полученную из формы, а затем вызывает функцию show(). В этой второй функции запись извлекается с помощью метода getItem() и значения аргумента keyword. Затем содержимое записи вставляется в элемент databox и отображается на экране.
  В дополнение к этим методам API хранения предоставляет упрощенный способ создания записей, а также извлечения их из хранилища. В этом способе можно использовать ключевое слово записи как свойство объекта sessionStorage и получить таким образом значение записи. Для этого способа предусмотрены два варианта синтаксиса: можно заключить переменную, хранящую ключевое слово, в квадратные скобки (например, sessionStorage[ключевое_слово] = значение), а можно использовать точку для доступа к записи (например, sessionStorage.myitem=значение).

14.4. Работа с записями упрощенным способом

function initiate(){
   var button = document.getElementById('save');
   button.addEventListener('click', newitem);
}
function newitem(){
   var keyword = document.getElementById('keyword').value;
   var value = document.getElementById('text').value;
   sessionStorage[keyword] = value;

   show(keyword);
}
function show(keyword){
   var databox = document.getElementById('databox');
   var value = sessionStorage[keyword];
   databox.innerHTML = '<div>' + keyword + ' - ' + value + '</div>';
}
addEventListener('load', initiate);

Удаление данных

  Записи можно создавать, читать и, разумеется, удалять из хранилища. Для выполнения последней задачи предназначены два метода:

• removeItem(key). Удаляет одну запись. Для идентификации элемента методу нужно передать ключевое слово, которое использовалось в методе setItem() при создании записи;
• clear(). Очищает пространство хранилища. Удаляются все находящиеся в нем записи.

14.6. Удаление записей

function initiate(){
   var button = document.getElementById('save');
   button.addEventListener('click', newitem);
   show();
}
function newitem(){
var keyword = document.getElementById('keyword').value;
var value = document.getElementById('text').value;

Оглавление
Отрывок
Книга на сайте издательства
Зарубежный правообладатель не предоставил права на электронную версию. Книга только в бумаге.
Как обычно, для Хаброжителей скидка 25% по купону HTML5 на книгу и серию «программирование на HTML5»:

1. HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств
Автор: Б. Фрэйн
2. HTML5. Для профессионалов
Автор: Х. Д. Гоше
3. HTML5. Рецепты программирования
Авторы: К. Шмитт, К. Симпсон