Web Storage наверное, одна из самых простых для понимания спецификаций HTML5. Статьи про эту технологию конечно уже существуют, но я, следуя духу блога, попробую объяснить, что такое Web Storage, очень простым языком, с примерами и подробными комментариями к ним.
Сразу оговорюсь, что библиотеку jQuery я использую в примерах скорее по привычке…
Обычно Web Storage рассматривают как развитие технологии cookie*. Действительно, при всей универсальности (поддерживаются производителями браузеров с незапамятных времен), файлам cookie присущи серьезные (с современной точки зрения) недостатки:
- ограниченный, и очень маленький размер файлов. Обычно не более 4 Кбайт;
- передача от браузера к серверу и обратно при каждом запросе;
Это только основные недостатки, углубляться в остальные не будем, чтобы не отвлекаться от темы.
Куки (от англ. cookie - печенье) - небольшой фрагмент данных, созданный веб-сервером или веб-страницей и хранимый на компьютере пользователя в виде файла, который веб-клиент (обычно веб-браузер) каждый раз пересылает веб-серверу в HTTP-запросе при попытке открыть страницу соответствующего сайта. Применяется для сохранения данных на стороне пользователя, на практике обычно используется для:
- аутентификации пользователя;
- хранения персональных предпочтений и настроек пользователя;
- отслеживания состояния сессии доступа пользователя;
- ведения статистики о пользователях.
Что получаем от использования Web Storage?
Во-первых, общий размер сохраняемых данных до 5 Мбайт (по крайней мере это рекомендации производителям браузеров);
Во-вторых, данные обоих хранилищ (локальное хранилище и хранилище сеанса) не гоняются от клиента к серверу и обратно;
В-третьих, в настоящее время Web Storage уже поддерживается последними версиями основных браузеров (к сожалению, отличия в реализации все равно существуют);
Большой минус – число поклонников древнего программного обеспечения среди пользователей Интернета снижается не слишком быстро и значит разработчик должен взвалить на свои хрупкие плечи обязанность проверить, поддерживает ли браузер эту технологию.
Проверка сводится к проверке существования объектов хранилища сеансов window.sessionStorage и локального хранилища window.localStorage.
Вы можете открыть файл example-a.html, чтобы увидеть пример в действии. Попробуйте открыть пример в разных браузерах.
Выполняем проверку window.sessionStorage1 if(window.sessionStorage)
2 {
3 alert("Браузер поддерживает хранилище сеанса");
4 } else {
5 alert("Браузер не поддерживает хранилище сеанса");
6 }
Аналогичным образом можно выполнить и проверку существования window.localStorage.
Если мы убедились, что используемый браузер поддерживает эту технологию, то настало время «живьем» посмотреть на этот самый Web Storage и узнать, чем отличается локальное хранилище от хранилища сеанса.
Возьмем для примера браузер Opera. Если нажать комбинацию клавиш Ctrl+Shift+I, откроется панель «Dragon Fly» – встроенное в браузер средство отладки. Можете попробовать и Google Chrome – используйте точно такое же сочетание клавиш.
Посмотрите – здесь доступно для просмотра, изменения и удаления содержимое обоих хранилищ.
Теперь о том, почему хранилищ два и чем они отличаются.
Если приложению требуются данные, которые продолжают существовать после того, как будет закрыта вкладка или окно браузера, тогда следует использовать localStorage. Здесь уместно сохранять данные, содержащие например, пользовательские настройки каких-либо интерфейсов.
Если же данные должны храниться в течение времени, которое необходимо для просмотра нескольких страниц (диалоговые окна, многостраничные формы) – подойдет sessionStorage. В этом случае данные перестанут существовать, как только пользователь закроет вкладку или окно браузера.
В остальном оба хранилища выглядят братьями-близнецами. По крайней мере установка, получение и удаление данных для обоих типов хранилищ не отличается ничем, кроме названия объекта – sessionStorage или localStorage.
Метод setItem принимает два аргумента – строку с именем ключа и строку с данными, которые в дальнейшем можно будет извлечь по соответствующему им ключу. Причем сделать это очень просто:1 var d = window.sessionStorage.getItem("mySessionKey");
Передаем методу getItem в качестве аргумента имя ключа, и в переменной d получаем строку ‘Какие-то данные в хранилище сеанса’. Так же просто можно удалить ставшие ненужными данные:1 window.sessionStorage.removeItem("mySessionKey");
ASUS WebStorage является одним из самых известных облачных сервисов на сегодняшний день. Каждому пользователю, который регистрирует аккаунт, выделяется около 5 Гб личного пространства, которое может быть использовано для хранения любых файлов (например, изображений или документов). Каждый из сохраненных элементов может быть отправлен друзьям, у которых также имеется аккаунт WebStorage.
Сервис можно использовать для хранения резервных копий важных документов.
Облачная технология, используемая ASUS, позволяет пользователю системы получать доступ к файлам с любого используемого устройства. Например, документ, сохраненный на сервере WebStorage , при помощи специального клиента может быть загружен , и другой компьютер. ASUS WebStorage доступен для платформ Windows, MacOS, Android, iOS, Windows Phone и Linux.
Регистрация аккаунта
Перейдите на официальный сайт сервиса и нажмите на ссылку «Зарегистрироваться» в правом верхнем углу экрана. На новой странице введите запрошенную информацию. В качестве WebStorage ID укажите ваш используемый e-mail адрес. Также задайте пароль, который в дальнейшем будет использоваться при входе в систему. Примите условия лицензионного соглашения и нажмите «Следующий».
Вы также можете задать папку на компьютере, файлы в которой будут постоянно синхронизироваться с сервером ASUS.
Проверьте ваш электронный ящик и перейдите по ссылке из письма от ASUS. Таким образом вы подтвердите привязку адреса к аккаунту и сможете получить дополнительное дисковое пространство в дополнение к первоначальным 3 Гб.
На странице сервиса вы увидите менеджер файлов, при помощи которого сможете управлять своими доступными документами. Вы можете управлять загружаемыми файлами как в окне браузера, так и при помощи дополнительных приложений. Чтобы загрузить документ с компьютера, вполне подойдет стандартный интерфейс WebStorage, однако если вы планируете выгружать документы при помощи вашего мобильного телефона или , установите дополнительно одноименное приложение. Программа доступна в магазине приложений (AppStore, iTunes, Play Market и Market) вашего устройства.
Запустите программу при помощи созданного в меню аппарата ярлыка и введите данные учетной записи, которые вы указали при регистрации. После выполнения входа вы сможете как скачивать, так и загружать нужные файлы на устройство.
Всем привет Если у вас ноутбук Asus, то рано или поздно вам может статьи интересно, а что это за программа такая — Asus WebStorage? Ну, сразу скажу, что это не вирус и вообще не опасное ПО, эта программа скорее всего шла с вашим ноутом уже в комплекте.
При покупке ноута или компьютера, на нем часто уже установлены какие-то программы, то для тачпада (например ), то для видеокарты, в общем программ может быть много, но не всегда они полезны. Данная программа, то есть Asus WebStorage также не особо полезна, но, возможно будет нам интересна.
Вообще немного удивительно, но Asus WebStorage относится к облачному хранилищу файлов. Что это такое? Это когда файлы у вас хранятся в облаке, то есть в интернете, возможно что это и хорошо, но есть проблемка — получить доступ к ним можно только при наличии интернета. И даже не простого — а прилично быстрого, ну если вы конечно не храните мелкие файлы. Сегодня что фотки, что видео, уже намного больше весит, чем это было пару лет назад, ибо качество и все такое
Хранить там можно все — и фильмы (хотя в бесплатный аккаунт максимум один влезет) и документы ну и другие файлы, далее этим всем можно поделится с теми, у кого также есть аккаунт в WebStorage. Хотя, я все таки думаю что сервис может быть интересен для сохранения копий каких-то важных документов! При этом получить файлы можно как с компьютера, так и с планшета или даже телефона (через специальную программу).
После установки специального софта на комп, вы можете задать специальную папку, которая всегда будет синхронизироваться с серверами Asus и обновлять там файлы, если вы что-то добавили в папку на компе.
Можно ли удалить Asus WebStorage? Можно, ничего страшного не произойдет, ваш ноут дальше будет нормально работать, смотрите только какие-то драйвера не удалите случайно.
AppCache решает задачу доступности некоторых элементов сайта в офлайне, но, возможно, нам захочется хранить некоторый объём пользовательских данных или, например, его последние поисковые запросы. В другом случае, может быть, вам захочется хранить более структурированные данные. В любом случае, Web Storage и WebSQL будут лучшим решением.Используем Web Storage
Web Storage прекрасно подходит для хранения небольших объемов информации, нежели огромных таблиц с данным, о чём кратко и поговорим в этой статье, рассмотрим примеры. Более подробную информацию вы можете узнать в отдельной статье, посвящённой Web Storage .Существует очень много мест, где частое отключение электричества - обычное явление («Чубайс, привет! :)», - от переводчика). Пользователю приходится сидеть и ждать, когда он сможет продолжить свою работу в Интернете, пока не включат электричество. А представьте, если кто-то оказался в подобной ситуации, заполняя многостраничную форму на каком-либо сайте, набирая большую статью для блога или важного электронного письма. Во время отключения питания (или сядут аккумуляторы) пользователь потеряет все эти данные. Не будет ли лучше, если после входа в сеть, ему будут доступны все несохраненные им записи, с которыми он продолжит работу?
Давайте посмотрим, что можно сделать на странице, содержащей обычное текстовое поле ? Страница должна сохранять всё, что мы набираем, в локальное хранилище каждые несколько секунд, а в случае её перезагрузки или закрытия, страница должна загружать последний сохранённый в поле текст.
Допустим, наша страница содержит поле с id «draft»:
... ...
Напишем простую функцию, которая будет сохранять в локальное хранилище содержимое :
function saveMessage(){ var message = document.getElementById("draft"); localStorage.setItem("message", message.value) }
Установим интервал сохранения в полсекунды:
setInterval(saveMessage, 500);
Также нужно убедиться, что каждый раз, когда страница открывается или перезагружается, в текстовое поле загружалось последнее сохранённое содержимое из локального хранилища (localStorage ):
window.addEventListener("DOMContentLoaded", loadMessage, false); function loadMessage() { var textbox = document.getElementById("draft"); var message = localStorage.getItem("message"); if (!message) { textbox.value = ""; }else { textbox.value = message; } }
Посмотрите пример работы с Web Storage . Это вообще шикар
ная вещь, если вам нужно сохранять локально небольшие кусочки информации.
Работаем в автономном режиме
Для перехода в автономный режим нужно его, собственно, активировать (в браузере Opera: «Меню» → «Настройки» → «Работать автономно» либо «Файл» → «Работать автономно»). Свойство navigator.onLine имеет значение false в случае, если браузер находится в автономном режиме, в противном случае оно имеет значение true . Однако, во многих случаях лучше было бы использовать события. Когда пользователь переключается в автономный режим, срабатывает событие offline , когда переключается обратно - соответственно online . Можно воспользоваться этим для вывода небольшого сообщения о переходе в автономный режим.Получится что-то типа этого:
... window.addEventListener("offline", function(){showWarningDiv("on")}, false); window.addEventListener("online", function(){showWarningDiv("off")}, false); ... function showWarningDiv(status){ var warningdiv = document.getElementById("warning"); if (status == "on"){ warningdiv.innerHTML = "
Right now you are in offline mode. This message is saved and will be sent to the server the next time you are online.
"; } else { warningdiv.innerHTML = ""; } }Имеет смысле убедиться, что формы не пытаются отправить данные в то время, когда пользователь работает в автономном режиме. Чтоб проверить это, можем сделать так:
... window.addEventListener("submit", submitForm, false); ... function submitForm(){ saveMessage(); if (!navigator.onLine){ return false; } }
При отправке данных формы срабатывает событие submit , которое вызывает функцию submitForm() . Эта функция сначала сохранит сообщение в локальном хранилище, затем, если пользователь работает в автономном режиме, данные никуда не отправятся.
Вы можете усовершенствовать этот пример, чтобы он сохранял копию на сервер каждые несколько секунд, чтобы там она была доступна на тот случай, если пользователь случайно удалит данные у себя. Это особенно важно в тех случаях работы, например, с конфиденциальной информацией: вы, скажем, хотите, чтобы информация о вашей кредитной карте хранилась только у вас - в локальном хранилище.
Посмотрите также более продвинутый пример , который использует для хранение информации sessionStorage . Если вы не закрываете страницу (даже в случае её перезагрузки) текст, введённый в текстовое поле, там и останется. Страница также будет отправлять содержимое этого поля на сервер каждые несколько секунд и, соответственно, обновлять время последнего сохранения. Данный подход может использоваться в блоговых движках и сервисах электронной почты для периодического сохранения «черновиков», что позволит продолжить работу в случае проблем с подключением.
WebSQL: еще «глужбе» в офлайн
Web Storage прекрасно подходит для хранения небольших объемов информации, а что если мы захотим хранить целую базу данных? Как насчёт того, чтобы веб-приложение могло делать различные запросы к базе данных, поиск по ней?Здесь Web Storage уже не позволит развернуться - нужно что-то более надёжное. А именно - WebSQL. WebSQL представляет собой локальную SQLite базу данных, в которой вы можете хранить свои данные, используя комбинацию Javascript и SQL.
Работа с WebSQL-базами данных
Перво-наперво нужно убедиться, поддерживает ли браузер WebSQL? Сделать это можно через свойство window.openDatabase :if (window.openDatabase){ //rest of your code } else{ alert("It seems your browser does not have support for WebSQL. Please use a browser which does, otherwise parts of this application may not run as intended."); //or any other similar message }
Создание и открытие базы данных
Создать и открыть базу данных можно, используя команду openDatabase , так:var db = openDatabase("food_db", "1.0", "Web SQL Storage Demo Database", 1*1024*1024); // creates a database called "food_db" with version number 1.0, description as "Web SQL Demo Database" and a size of 1MB.
Мы только что создали базу данных food_db «версии» 1.0, с описанием «Web SQL Storage Demo Database» , размером 1 МБ. Переменная db представляет собой указатель на объект базы данных, который мы и будем в дальнейшем использовать.
Работа с базой данных
Мы создали и открыли базу данных. Теперь можно выполнять различные операции над ней, используя SQL-команды. Операции мы будем производить, вызывая функцию transaction() объекта базы данных (в нашем случае это db ). Её вызов возвращает объект в качестве указателя, над которым мы будем выполнять различные команды, используя executeSQL() . Синтаксис этой команды следующий:executeSql(sqlStatement, arguments, callback, errorCallback);
Из параметров только sqlStatement является обязательным, остальные - необязательные.
Так, например, если мы хотим создать таблицу, нужно будет написать следующее:
... db.transaction(function(t){ // This is the callback with "t" as the transaction object t.executeSql("CREATE TABLE IF NOT EXISTS cal_list (food_name TEXT PRIMARY KEY, calories REAL, servings TEXT)"); }); ...
Этот код создаст таблицу cal_list (если её не существовало) с полями food_name , calories и servings .
Добавление записей в таблицу
Выполнять запросы на добавление записей в таблицу - простая задача для WebSQL. Рассмотрим пример:var food_name = "pizza"; var amount_of_calories = 320; var serving_size = "one slice"; db.transaction(function(t){ t.executeSql("INSERT INTO cal_list VALUES (?, ?, ?)", ); });
Первый знак вопроса экранирует параметр food_name , второй - amount_of_calories , а третий - serving_size . Этот код добавляет запись в таблицу cal_list со значениями: pizza , 320 и one slice соответствующие столбцы.
Выполним другой запрос - на получение данных:
var min_cal_amount = 300; ... t.executeSql("SELECT * FROM cal_list WHERE calories > ?", );
Этот код выполнит запрос на выборку всех строк со значением calories больше 300: знак вопроса экранирует переменную min_cal_amount .
Обработка результатов запроса
Ну, вот, мы создали базу данных с таблицами, в которые записали данные, теперь мы хотим сделать запрос и вывести полученные результаты. Обычно, мы получаем кучу результатов для одного SQL-запроса и нам нужно как-то обработать эти результаты, чтобы вывести их в виде таблицы или каком-то другом структурированном виде на странице. Третий параметр функции executeSQL() определяет успешность выполнения запроса. Ниже приведён пример обработки результатов:var list = document.getElementById("thelist"); var food; var min_cal_amount = 400; var serving_size; db.transaction(function(t){ t.executeSql("SELECT food_name AS food, calories AS amount_of_calories, servings as serving_size FROM cal_list where calories > ?" ,, function(t,r){ for (var i=0; i < r.rows.length; i++){ food = r.rows.item(i).food; amount_of_calories = r.rows.item(i).amount_of_calories; serving_size = r.rows.item(i).serving_size; list.innerHTML +="
Сначала мы определяем количество элементов в результате запроса через r.rows.length и пробегаемся от 0 до этого значения. Каждый элемент доступен по r.rows.item(i) , где i - номер строки. Названия столбцов можно получить так же. Для получения получения значения столбца food используем r.rows.item(i).food и так далее для других столбцов.
Используем всё и сразу
Не исключено, что вам захочется использовать Web Storage, Application Cache и WebSQL вместе. Это возможно, всё зависит от задач, которые нужно решить. Например, если вы хотите хранить всего лишь некоторые пользовательские настройки, будет излишеством использовать WebSQL. Для подобных целей лучше подойдёт Web Storage.Однако, если у вас большой объём данных, и нужно их как-то обрабатывать, то логичнее было бы использовать WebSQL.
Посетите страницу с примером про калории, на которой используются вместе все три технологии : база данных хранится в Web Storage, так что вы сможете искать даже если закроете или перезагрузите страницу, AppCache и WebSQL используются для предоставления возможности работать в автономном режиме.
Подождите… разве спецификации WebSQL утверждены?
Ещё не окончательно. Но вы уже можете применять эту технологию на приведённом списке браузеров и устройств. Чего нельзя сказать о IndexedDB, у которой нет такой кросс-платформенной поддержки. Осталось только дождаться утверждения спецификации, что и произойдёт в скором времени.Важно также отметить, что некоторые настольные версии браузеров, такие как Firefox и Internet Explorer, не будут поддерживать WebSQL, они будут работать с IndexedDB. В этом случае, первое, где можно применить WebSQL - автономное хранилище данных для смартфонов: поддерживаются браузеры Opera Mobile 11, а также браузеры на движке WebKit для платфом Android и iOS.
Хорошая новость о WebSQL заключается в том, что он предлагает удобный инструмент для создания автономной базы данных в браузере. Он лёгок в изучении и применении и позволяет быстро разработать автономное веб-приложение, которое будет сразу работать в нескольких браузерах.
Заключение
Веб-приложения теперь получили возможность работать в полностью автономном режиме, используя такие технологии, как Application Cache, Web Storage и WebSQL базы данных. Application Cache нам нужен для кэширования файлов, чтоб исползовать их в автономном режиме; Web Storage - для хранения небольших объёмов информации, ну а WebSQL будет удобным инструментом для работы с большими объёмами данных. Разработчики в зависимости от потребностей могут использовать различное сочетание этих технологий, для создания автономных приложений.Технология перспективная. И, как обычно, будут гонки… WebSQL и IndexedDB, упоминания о которой уже Добавить метки
28.12.13 5.8KПочти всем настольным и мобильным приложениям нужно где-то хранить пользовательские данные. Но как быть веб-сайтам? В прошлом, мы использовали для этой цели файлы cookie , но у них есть серьезные ограничения.
HTML5 предоставляет более подходящие инструменты для решения этой проблемы. Первый инструмент – это IndexedDB , который является излишним, говоря о замене cookie, а второй – Web Storage , являющееся комбинацией двух очень простых интерфейсов API. О нем я и собираюсь рассказать вам сегодня.
Что такое Web Storage?
Вообще, Web Storage (известное также как DOM-хранилище ) относится ко множеству API, которые нацелены на обеспечение простого способа хранения данных со стороны клиента в браузере. Эта технология более безопасная и быстрая, чем cookie, не о говоря уже о ее мощности.
Данные сохраняются в пользовательском браузере и не передаются по сети как файлы cookie. Кроме того, можно сохранять большее количество информации, чем при использовании файлов cookie, без ущерба производительности вашего веб-сайта.
Web Storage предоставляет два отличных объекта для хранения данных:
localStorage : Используя этот объект, вы будете сохранять данные без даты окончания срока. Это значит, что данные будут сохранены на локальном диске пользователя навсегда.
sessionStorage : Используя этот объект, данные, которые вы сохранили, будут находиться в хранилище до тех пор, пока посетитель не закроет браузер (но не вкладку). Хороший вариант использования для данного объекта это сохранение временных данных, таких как содержимое форм, заполненных пользователем, в случае, если пользователь случайно закрыл вкладку или обновил страницу.
Поехали!
Итак, сейчас когда мы узнали, что же такое Web Storage, пришло время поглубже окунуться в него.
localStorage
Сохранять данные в localStorage очень просто – вам нужно только объявить их как свойство. Чтение данных также просто, как в примере, приведенном ниже:
localStorage.myText = "Это текст, который был сохранен при помощи объекта localStorage"; document.getElementById("text").innerHTML= localStorage.myText;
sessionStorage
Хранение и извлечение данных из sessionStorage выполняется таким же способом:
sessionStorage.myText = "Это текст, который был сохранен при помощи объекта sessionStorage"; document.getElementById("text").innerHTML= sessionStorage.myText;
Оба объекта имеют методы setItem(), getItem() и removeItem() , которые вы также можете использовать:
localStorage.setItem("username","Johnny"); console.log(localStorage.getItem("username")); localStorage.removeItem("username"); // Johnny больше нет!
Также можно выполнять по ним перебор, как по обычным объектам, и проверять их длину:
console.log(localStorage.length); for(var i in localStorage){ console.log(localStorage[i]);}
Это только основы для использования Web Storage, но этого будет достаточно для реализации API в ваших веб-приложениях.
Существуют и более крутые вещи, которые вы можете делать с Web Storage, как вы сможете увидеть прямо сейчас.
Поддержка браузера
Как обычно в случае с потрясающими функциями HTML5, вы должны проверить список поддерживаемых браузеров, прежде чем воспользоваться этими функциями. Web Storage поддерживается почти всеми современными браузерами, включая IE8+, поэтому оно готово к использованию.
К сожалению, IE7 и более ранние версии Internet Explorer не поддерживают API, поэтому вам нужно будет использовать один из приведенных ниже откатов, если вы хотите поддерживать эти версии.
Библиотеки Javascript для Web Storage
Здесь приведены несколько крутых библиотек на JavaScript, которые поднимают Web Storage на следующий уровень:
basket.js
Простой (экспериментальная проверка концепции) загрузчик скриптов, который кэширует скрипты при помощи localStorage .
Kizzy
Легкая, кросс-браузерная JavaScript утилита локального хранения.
LocalDB.js
Инструмент, который отображает структуру баз данных в объекты с помощью localStorage API .
Rockstage.js
Библиотека JavaScript для более легкого использования localStorage и sessionStorage .