Хранение данных

Хранение данных 

 

Помните, как нам нравилось работать с cookie? Нет? Я тоже. С cookie было неудобно возиться со времен их появления, однако с этими неудобствами приходилось мириться, потому что другого способа хранения данных на клиентском компьютере не было. Чтобы использовать cookie, необходимо было присвоить ему имя и задать срок действия. Код JavaScript, в котором выполнялись эти операции, обычно «заворачивался» в функцию, чтобы разработчик мог просто пользоваться им, не задумываясь над тем, как этот код работает:

 

//Из http://www.javascripter.net/faq/settinga.htm

 

<HTML>

Function Set Cookie (cookieName, cookieValue, nDays) {

var today= new Date ();

var expire= new Date ();

If (nDays==null || nDays==0) nDays=lj

expire.setTime (today.getTime () + 3600000*24*nDays);

Document. Cookie = cookieName+M="+escape (cookie Value)

+ ";expires="+expire.toGMTString();

}

</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Кроме трудно запоминаемого синтаксиса, также приходится учитывать проблемы безопасности. Некоторые сайты используют cookie для отслеживания поведения пользователей в Интернете, поэтому пользователи часто тем или иным образом отключают cookie. О слежке по файлам Cookie смотри "Защита Сайта"

В HTML5 появились новые технологии хранения данных на стороне клиента, это целая система хранения данных: Web Storage (с использованием local Storage или session Storage), Indexed2 и Web SQL Databases3. Они обладают чрезвычайно широкими возможностями и в достаточной степени безопасны. И что самое лучшее, они уже реализованы в нескольких браузерах, включая Safari для iOS и браузер Android 2.0.

Тем не менее, формально эти технологии не являются частью спецификации HTML5, — они были выделены в отдельные спецификации.

Хотя эти механизмы не могут заменить cookie, которые должны передаваться между клиентом и  сервером  (как в веб-инфраструктурах,  использующих cookie для хранения состояния между запросами), они могут использоваться для хранения данных, представляющих интерес только для пользователя (например, визуальных настроек или предпочтений).

Также они хорошо  подходят для построения мобильных приложений, которые могут работать в браузере без подключения к Интернету. Многие веб-приложения в настоящее время для сохранения пользовательских данных обращаются к серверу, но с появлением новых механизмов хранения необходимость в подключении к Интернету отпала.

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

Вы научитесь использовать эти технологии для сохранения пользовательских  настроек и создания простой базы данных. В этой главе рассматриваются следующие возможности:

localStorage

Хранение данных в виде пар «ключ/значение» с привязкой к домену и сохранением данных между сеансами…

sessionStorage

Хранение данных в виде пар «ключ/значение» с привязкой к домену и уничтожением данных при завершении сеанса.

Ind.exed.DB

Хранилище объектов, содержимое  которого сохраняется между сеансами.

Web SQL Databases

 

Полноценные реляционные базы данных с поддержкой создания таблиц, вставки, обновления, удаления, выборки и транзакций, с привязкой к домену и сохранением данных между сеансами. Дополнительную информацию можно получить TR-webdatabase

 Технология исключена из активной спецификации.

 

Offline Web Applications.

 

Кэширование файлов для автономного использования; позволяет приложениям работать без подключения к Интернету.

 

 Сохранение настроек с использованием Web Storage:

 

 Механизм Web Storage, предоставляет в распоряжение разработчика очень простой способ хранения данных на клиентском компьютере. По сути, он представляет собой хранилище для пар «имя/значение», встроенное в браузер.

 

Сохранение и чтение строк данных легко реализуется минимальным объемом кода JavaScript. Это один из самых распространенных интерфейсов хранения информации, реализованный в Internet Explorer 8, а также в старых версиях iOS и браузера Android.

 

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

 

Если вы работаете на локальном сервере (например, localhost), в переменных легко возникает путаница, и вам придется постоянно приказывать браузеру очистить хранилище.

 

Фирма AwesoraeCo занимается разработкой нового портала для своих клиентов и хочет, чтобы посетители могли изменять размер текста, фон и цвет текста на сайте. Для хранения  настроек будет использоваться механизм Web  Storage, чтобы сохраненные данные не терялись между сеансами. После завершения работы у нас должен получиться прототип, показанный на рисунке.

 

Хранение данных

 

Технологию по построению форм смотри на странице «Создание форм»

 

Построение формы

 

При построении формы ввода настроек будет использоваться семантическая разметка HTML5 и новые элементы, описанные в главе 3. Пользователю предоставляется возможность выбрать цвет текста, цвет фона, а также размер шрифта.

 

<HTML>

html_localstorage/index.html

<!DOCTYPE  html>

<html lang="en-US">

 <head>

 <meta charset="utf-8">

  <title>Preferences</title> 

  <link rel="style sheet" href"stylesheets/style.css"> 

  <script src="javascripts/modernizr.js"/script>

</head>

<body>

 <div id="container">

  <p>strong>Preferences</strong/p>

    <form id="preferences «action="save_prefs"

      method="post" ассept-сharset="utf-8">

       <field set id="cotors" class="">

         <Legend>Colors</legend>

          <ol>

          <li>

           <label for="background_color">Background color</label>

           <input class="color" type="color"

             name="backgroun_color"

             value="" id="background_color">

        </li>

      <li>

    <label for="text_coLor">Text color</label>

    <input class=”color” type="color" name="text_color"

          value=”" id="text_cotor">

      </li>

     <li>

       <label for="text_size">Text size</label>

       <select name="text_size" id="text_size">

       <option value="16">16px</option>

       <option value="20">20px</option>

       <option value="24">24px</option>

       <option value="32">32px</option>

     </select>

 </ol>

</fieldset>

<input type="submit"value="Save changes">

</form>

</div>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Для представления цветов используются коды HTML, а для полей — тип HTML5 color. Также будет добавлен небольшой фрагмент CSS для стилевого оформления формы.

<HTML>

html_localstorage/stylesheets/style.css

form ol{

list-style: none;

margin: 0;

padding: 0;

}

form  li{

margin: 0;

padding: 0;

}

form li label { display:block; }

</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Прототип готов к использованию. Теперь займемся сохранением изменений, внесенных на форме.

Сохранение  и загрузка  настроек.

 

Для работы с системой localStorage достаточно обратиться к объекту window.localStorage() из  кода JavaScript.

Присваивание пары  «имя/ значение» выполняется очень просто.

<HTML>

html_localstorage/javascripts/storage.js

localStorage.setItem ("background_coLor",), $("#background_color").

val());

</HTML>

 

 

 

 

 

 

 

 

Не сложнее, выполняется и чтение сохраненных данных.

<HTML>

html5_localstorage/javascripts/storage.js

var bgcolor = localStorage.getItem ("backgraund_color");

</HTML>

 

 

 

 

 

 

Напишем вспомогательный метод для сохранения всех настроек с формы. Создайте файл  javascripts/storage.js и добавьте в него следующий код:

<HTML>

html5_localstorage/javascripts/storage.js

var save_settings = function(){

localStorage.setltem("background_color",

      $("#background_color").val( ));

localStorage.setltem ("text_color”, $("#text_color").val ());

localStorage.setltem ("text_size", $ ("#text_size").val ());

apply_preferences_to_page () j

}

</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

Метод извлекает значения из полей формы и помещает их в ключи localStorage.

Аналогичный метод загружает данные из системы localStorage  и заполняет ими поля формы.

 

<HTML>

html5_localstorage/javascripts/storage.js

var load_settings = function () {

var bgcolor = localStorage.getItem ("background_color");

var text_color = localStorage.getItem ("text_color");

var text_size = localStorage.getltem ("text_size");

$("#background_color").val (bgcolor);

$("#text_color").val (text_color);

$("#text_size").val (text_size);

apply_preferences_to_page ();

};

</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Этот метод также вызывает другой метод apply_preferences_to_page(), заполняющий загруженными данными элементы страницы. Он описывается в следующем разделе.

Применение  настроек

Теперь, когда мы можем прочитать настройки из localStorage,  загруженные данные необходимо применить к странице. Все настройки в нашем примере связаны с CSS, а для изменения стилей любого элемента будет использоваться библиотека jQuery.

 

<HTML>

html5_localstorage/javascripts/storage.js

var apply_preferences_to_page = function () {

$("body").css ("backgroundColor", $("#background_color").val ());

$("body").css ("color", $("#text_color").val ());

$("body”).css (fontSize", $("#text_size").val () + "px");

};

</HTML>

 

 

 

 

 

 

 

 

 

 

 

Наконец, вся эта логика активизируется в конце документа.

<HTML>

html5_localstorage/javascripts/storage.js

load_settings ();

$('form#preferences').submit (function (event) {

event.preventDefault();

save_settings();

});

</HTML>

Последнее, что осталось сделать — загрузка сценария и jQuery при загрузке страницы HTML. Включите следующие две строки непосредственно перед закрывающим тегом <body>:

<HTML>

html5_localstorage/index.html

<script src="http://ajax.googleopis.сот/ajax/Libs/jquery/1.9.1

/jquery.min.js">

</script>

<script  src="javascripts/storcige.js"x/script>

</HTML>

 

 

 

 

 

 

 

 

 

 

Теперь данные сохраняются между сеансами браузера.

 

SESSIONSTORAGE

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

По основным принципам работы он очень похож на localStorage, но содержимое sessionStorage стирается при завершении браузерного сеанса. Для работы с этой системой хранения вместо объекта localStorage следует обратиться к объекту

sessionStorage:

sessionStorage.setltem('name', 'Brian Hogan');

var name = sessionStorage.getltem ('name');

 

 

 

 

 

Такое решение намного удобнее традиционных решений с cookie.

Обходное  решение

Метод localStorage  работает во всех современных браузерах и нескольких старых, так что обходное решение на стороне клиента не понадобится. Однако данными, хранимыми в localStorage, не удастся обменяться с сервером или другим компьютером, так что  если  пользователь дома изменит конфигурацию, эти изменения не будут доступны на его рабочих компьютерах. Кроме того, решение не работает, если пользователь отключил JavaScript.

Таким образом, хорошее обходное решение будет основано на сохранении данных на сервере. В таких приложениях при нажатии кнопки Submit данные могут сохраняться на сервере, связываясь с записью пользователя.

Форма строится так, что она отправляет данные непосредственно на сервере, а в страницу вносятся изменения: при отсутствии настроек на стороне клиента используются настройки со стороны сервера.

К сожалению, написание серверного решения выходит за рамки статьи.

Технология хранения данных Web Storage хорошо подходит для малых блоков данных, но, во-первых, ее производительность на мобильных устройствах оставляет желать лучшего, а во-вторых, она не предназначена для больших объемов данных. Рассмотрим  возможности  хранения более сложных структур данных на стороне клиента.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

This blog is kept spam free by WP-SpamFree.