Одной из наиболее интересных и полезных новых функций, появившихся в спецификации HTML5, является веб-хранилище, которое предоставляет нам до 5 МБ постоянного хранилища данных для наших веб-приложений.
В этой статье мы усовершенствуем пример, начатый в предыдущем блоге, « Планирование перетаскивания с HTML5» . В этом примере была построена простая доска гибкого планирования с двумя карточками заметок, которые можно перетаскивать в разные части доски. В этой статье мы рассмотрим, как на самом деле хранить последнее местоположение каждой из карточек, поэтому, когда вы вернетесь на сайт, карточки будут там, где вы их оставили.
Вы можете найти законченный пример на github . Тем не менее, я рекомендую вам начать с начальной страницы и постараться включить сохранение заметок со мной на протяжении всей этой статьи. Для этого вы можете найти версию кода до веб-хранилища здесь , а демонстрационную страницу этого кода здесь .
В веб-хранилище определены два типа хранилища: хранилище сеансов и локальное хранилище .
Session Storage решает проблему, которая преследует нас с помощью файлов cookie: случайная покупка двух копий одного и того же элемента. Предположим, что вы покупаете билеты на самолет онлайн, и у вас есть несколько открытых окон, чтобы попытаться найти лучшее предложение. Несмотря на то, что у вас открыто несколько окон, если сайт использует файлы cookie для отслеживания ваших заказов, все файлы cookie используются несколькими окнами. Это может привести к случайной покупке одного и того же билета дважды.
SessionStorage решает эту проблему для нас. Благодаря Session Storage у нас есть отдельное хранилище данных для каждого открытого окна или вкладки. Данные не сохраняются после сеанса, поэтому, если вы закроете окно или вкладку, данные исчезнут. Но пока вы совершаете покупки, данные в одном окне будут полностью отделены от данных в другом окне, если сайт использует хранилище данных хранилища сеансов.
Но как насчет значений, которые вы хотите сохранить на диск? На нашей доске планирования мы хотим, чтобы мы помнили последнее местоположение карточек, которые мы перетаскивали. Чтобы сохранить их последнее местоположение, нам нужно воспользоваться вторым типом веб-хранилища, называемым локальным хранилищем.
Локальное хранилище обеспечивает постоянное хранилище данных до 5 МБ. Одна важная вещь о локальном хранилище состоит в том, что у каждого браузера будет свое собственное, индивидуальное хранилище объемом 5 МБ, и данные не будут использоваться браузерами.
Данные, сохраненные с использованием локального хранилища, хранятся в виде пар ключ / значение. Пара ключ / значение является распространенным способом хранения данных, отслеживая две части информации: ключ и значение. Ключ описывает, что это за информация, а значение представляет собой фактический фрагмент данных, который вы хотели бы связать с ключом.
Локальное хранилище предоставляет нам объект с именем localStorage , который позволяет нам получать и устанавливать наши пары ключ / значение. Оба значения должны быть сохранены как строки — даже если мы позже конвертируем их в другие типы данных. Чтобы установить пару ключ / значение, мы вызываем: localStorage[key] = “value” . Чтобы получить значение из данного ключа, мы вызываем: var myValue = localStorage[key] .
Мы будем использовать этот объект localStorage для хранения местоположений двух карточек. Сначала мы определим функцию с именем saveLocations которая будет сохранять местоположения карты заметок и родительский элемент, в который мы ее поместили:
function saveLocations(parent, notecard){ // save the locations of notecards after each drop event // grab the notecard via jQuery using ids var parentId = parent.getAttribute('id'); var key = notecard + "parent"; // store the notecard's parent id in localStorage localStorage[key] = parentId; }
Мы получаем идентификатор родителя, вызывая parent.getAttribute('id') . Затем мы создаем ключ, который представляет собой конкатенацию идентификатора карты заметки (который будет передан функции в качестве второго аргумента) и слова «родитель». Так, например, ключ для родителя первой карты заметок будет «item1parent». В качестве последнего шага мы продолжаем и сохраняем значение localStorage коллекции localStorage под значением, хранящимся в переменной key .
Давайте вызовем saveLocations после saveLocations элемента, поэтому мы можем быть уверены, что каждый раз, когда элемент перемещается с помощью перетаскивания, мы сохраняем новое местоположение в localStorage . Мы добавим его в конец анонимной функции, которая связана с событием drop в методе init() . Мы написали этот код, когда впервые создали этот пример, на доске планирования «Перетаскивание» с HTML5 . Здесь мы просто добавляем строку в конце:
// bind the drop event on the board sections $('#todo, #inprogress, #done').bind('drop', function(event){ var notecardId = event.originalEvent.dataTransfer.getData("text/plain"); event.target.appendChild(document.getElementById(notecardId)); event.preventDefault(); saveLocations(event.target, notecardId); });
Мы передаем event.target , который является одной из досок объявлений, и идентификатор карточки заметок, которую перетащили и уронили.
Итак, теперь мы сохраняем новые местоположения, но как насчет загрузки этих сохраненных значений после перезагрузки страницы?
Для повторной загрузки значений, сохраненных в localStorage , мы создадим еще одну новую функцию с именем loadLocations . Во-первых, мы получаем родителя обеих карточек, получая доступ к значениям, хранящимся в ключах «item1parent» и «item2parent»:
function loadLocations(){ // find the parent for item1 and item2 var item1parent = localStorage['item1parent']; var item2parent = localStorage['item2parent']; }
Далее мы проверим, чтобы убедиться, что в каждой новой переменной хранится значение. Если есть, мы должны помнить, что сохраненное значение является строкой, а не объектом. Чтобы получить фактический HTML-элемент родителя, мы должны получить элемент по его идентификатору через document.getElementById() . Мы делаем то же самое для карточек. Наконец, мы продолжим и переместим карточки заметок из их расположения по умолчанию в первом разделе доски объявлений в их фактическое последнее местоположение, добавив элемент notecard в родительский элемент:
function loadLocations(){ // find the parent for item1 and item2 var item1parent = localStorage['item1parent']; var item2parent = localStorage['item2parent']; if (item1parent) { var parent1 = document.getElementById(item1parent); var notecard1 = document.getElementById('item1'); parent1.appendChild(notecard1); } }
Мы повторяем тот же процесс для родителя второго элемента:
function loadLocations(){ // find the parent for item1 and item2 var item1parent = localStorage['item1parent']; var item2parent = localStorage['item2parent']; if (item1parent) { var parent1 = document.getElementById(item1parent); var notecard1 = document.getElementById('item1'); parent1.appendChild(notecard1); } if (item2parent) { var parent2 = document.getElementById(item2parent); var notecard2 = document.getElementById('item2'); parent2.appendChild(notecard2); } }
В качестве последнего шага мы будем вызывать loadLocations() из метода init() который мы создали в первоначальном примере, на доске планирования перетаскивания с HTML5 :
function init(){ loadLocations(); . . . }
Теперь, когда мы перемещаем карточки по доске объявлений, даже если мы закрываем и снова открываем сайт, карточки будут там, где мы их оставили, и все благодаря Веб-хранилищу!
Очень много хорошего HTML5 очень и очень скоро появится в HTML5 и CSS3 для Реального мира , в соавторстве с Эстель Вейл, Луи Лазарисом и вами по-настоящему.
А пока расскажите нам о том, как использовать Drag and Drop с локальным хранилищем.