Облачные хранилища уже давно не новшество. Практически каждая известная и солидная корпорация включает поддержку облачных хранилищ для своих продуктов. ASUS не стала исключением и предлагает клиентам воспользоваться «облаком». Это можно сделать, несколькими способами и утилита Webstorage — одно из решений. Что это за программа и какие возможности получает пользователь, установив ее на ПК, оговорю в рамках данной публикации.
О программе
Это облачное хранилище, представленное компанией ASUS для всех популярных операционных систем. Сервисом может воспользоваться любой желающий.
Тарифный план
В бесплатный тарифный план входят:
- 5 Гб дискового пространства.
- Лимит на загрузку одного файла 500 Мб.
- Резервное копирование на 1 ПК.
Конечно, 5 Гб по сегодняшним меркам это мало, но проведя аналогию с другими популярными облачными хранилищами — это приемлемый показатель. На сегодняшний день:
- После OneDrive — 5 Гб.
- DropBox — 2 Гб.
- Google Drive — 15 Гб.
- Облако Mail.ru — 15 Гб (возможны акции по увеличению дискового пространства).
Платный тарифный план кардинально меняет обстановку.
WebStorage и его применение для связи окон. Web-Agent
| Дисковое пространство | 200 Гб | 2 Тб | 5 ТБ |
| Цена, USD | 29,99 | 99,99 | 419,99 |
| Лимит загрузки файла | 10 Гб | 10 Гб | 10 Гб |
| Резервное копирование | на одном ПК | на 2-х ПК | на 2-х ПК |
| Журнал версий | за 30 дней | за 30 дней | за 30 дней |
| Обратная связь | да | да | да |
Возможности
Облако наделено такими функциями:
| Доступ к файлам | |
| Подключение | Облако работает с 7-ю ОС и 4-мя популярными браузерами, поэтому доступно практически с любого устройства с выходом в интернет. |
| Интерфейс | Простой и понятный интерфейс позволяет управлять и следить за информацией. |
| Автосинхронизация фото и видео | Настройка функции автоматической синхронизации фото и видео, сделанные камерой. |
| Резервирование | Возможно сделать резервное копирование данных на компьютере. Восстановление данных делается нажатием одной кнопки. |
| Поиск | Поиск позволяет находить нужные данные, использовав ключевое слово. |
| Передача файлов | |
| Ссылки | Можно создать ссылку для любых данных на облаке и поделится ею с семьей и друзьями. |
| Защита рассылки | Защитить рассылку файлов от третьих лиц помогут пароль и дата окончания действия. |
| Учетная запись | Можно использовать единый профиль для организации общего и домашнего облака |
| Безопасность | |
| Двухфакторная аутентификация | Функция генерирует каждые 30 секунд динамический пароль (OTP) для обеспечения безопасности. |
| Журнал входа в систему | Ведется учет входа в облако, а именно время и IP. |
| Проверка на вирусы | Файлы, загружающиеся на облако, проходят проверку на вирусы онлайн сканером. Если антивирус обнаружит вредоносное ПО, то автоматом отправляет его в карантин. |
Что такое local storage?
Для владельцев устройств ASUS, с предустановленным WebStorage, предоставлено больше возможностей и льгот .
Работа с приложением
Для того, чтобы начать пользоваться WebStorage, необходимо скачать соответствующее приложение.
Для рабочего стола
Чтобы воспользоваться программой для рабочего стола, скачайте с официального сайта установщик:
Для того, чтобы синхронизировать файл с WebStorage, переместите его в папку MySyncFolder самостоятельно или через соответствующую функцию в контекстном меню.
Недавно я узнал о существовании такой программы, как ASUS Webstorage . Коротко расскажу о том, что это за сервис ASUS Webstorage, и дам дельный совет по пользованию разработкой интернет-хранилища ASUS.
А также расскажу, что такое веб хранилище Webstorage. Этотехнология, которая позволяет сохранять на стороне клиента информацию для повторного использования.
Просмотрите видео:
Компания ASUS выпустила это DOM-хранилище Webstorage, чтобы не отставать от других компаний. Google и Яндекс уже давно предоставили своим пользователям облачные диски для хранения информации. ASUS это явно не по душе — люди перестали зависеть от ноутбука, и теперь могут оставлять важную информацию на независимом сервере. Чтобы как-то оставить пару калек у своего разбитого корыта, и была создана эта программа ASUS Webstorage.
Сразу скажу: сервис Webstorage мне не понравился. Но я не могу говорить за всю планету, ведь в феврале 2015 года облачным хранилищем пользовались около 24 миллиона человек. Внушительная цифра. Но для меня этого недостаточно. Возможно, вам этот сервис понравится больше, а я уже привык к Google Диску.
Что можно делать с ASUS Webstorage?
- Резервное копирование файлов.
- Синхронизация с других устройств.
- Совместный доступ.
- Можно делиться файлами с компьютера в Webstorage.
- Общий пароль для аккаунта на разных устройствах.
- Передаваемые данные шифруются.
У вас есть небольшой кладезь ценной информации, которую вы никак не хотите потерять? Для этого и нужна эта программа ASUS Webstorage. Под словом «небольшой» я подразумеваю до 5 Гб данных. Именно такое пространство на диске дает ASUS после регистрации в сервисе. Что это такое Webstorage мы разобрались, теперь поговорим о регистрации в хранилище данных.
Как зарегистрироваться в ASUS Webstorage?
Очень просто. Откройте страницу ASUS Webstorage .
После этого вам дадут 3 Гб на диске. Чтобы получить еще 2 Гб, подтвердите регистрацию на почтовом ящике. Готово!
Почему мне не нравится ASUS Webstorage?
Мне нравится, что в онлайн сервисе ASUS Webstorage можно создавать папки, и включать режим совместного доступа. Но я не переношу медленную скорость загрузки, а при передаче данных «с» и «на» сайт ASUS скорость очень медленная! Слышал на форуме от одного пользователя, что 6,5 Гб он скачивал с сервиса на протяжении 3 недель! Нет, в черепашьи бега я не записывался. Мне стало ясно, что эта программа Webstorage только для файлов с маленькими размерами.
Тем не менее, это приложение ASUS Webstorage и сервис будут полезны людям, хранящим мелкие файлы. К примеру, хорошо хранить текстовые документы на диске — они передаются быстро, и 5 Гб вам хватит надолго. А если хотите увеличить доступное пространство, придется зарегистрироваться в приложении от Microsoft с устройства ASUS. Пространство увеличат до 15 Гб.
Похоже, именно для этого и создали это хранилище: чтобы в погоне за лишними гигабайтами люди покупали продукцию ASUS. Плюс можно получить бонус за приглашение друга. А для самых «прожорливых» есть платные версии хранилища объемом до 500 Гб. Стоит платная версия около 90 долларов в год.
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) вашего устройства.
Запустите программу при помощи созданного в меню аппарата ярлыка и введите данные учетной записи, которые вы указали при регистрации. После выполнения входа вы сможете как скачивать, так и загружать нужные файлы на устройство.
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»);
Еще по теме статьи:
Свежие записи
Камни, помогающие в любви и семейной жизни
Красивые статусы про свадьбу
Статусы свадебные про любовь
Картинки с надписями «свадьбы, годовщины»
Поздравления с днем святого валентина
Нут: рецепты приготовления просто и вкусно Сладкие блюда из нута
Сырный суп с плавленным сыром пошаговый рецепт Быстрый сырный суп рецепт с плавленным сыром
Очень простые, быстрые и вкусные рецепты пирогов на скорую руку Какой пирог можно испечь быстро
Простые рецепты: филе щуки
Блюда из хека Диетические блюда из хека рецепты
Источник: domvamdom.ru
Кэш: грузимся и при отсутствии сети
В общем случае, если мы не в сети, то при загрузке или перезагрузке страниц сайта мы получим ошибку. Первое, что нужно сделать — убедиться, что наши пользователи могу видеть страницы и работать с веб-приложением даже при отсутствующем подключении, т.е. все картинки, CSS, JavaScript и сама HTML-страница должны корректно загружаться в этом режиме.
Достигается это путем использования технологии Application Cache (называемую также AppCache). Чтобы её использовать, нужно для начала объявить manifest-файл, в котором указать имена файлов, которые необходимы приложению для работы офлайн.
Пример файла demo.manifest:
CACHE MANIFEST CACHE: logo.png style.css script.js jquery.js index.htm
Какие бы ссылки ни содержал этот manifest-файл, соответствующее содержимое помещается в кэш, и впоследствии к этому содержимому уже будет доступ. Объявить manifest-файл очень просто — нужно использоваться атрибут manifest элемента :
Все файлы, объявленные в этом файле, будут помещены в кэш вашего браузера. Даже если человек не в сети и пытается загрузить страницу, то все ресурсы, указанные в этом файле, загрузятся браузером.
Более подробную информацию об этом вы можете найти в статье про HTML5 Application Cache.
Что насчет данных?
AppCache решает задачу доступности некоторых элементов сайта в офлайне, но, возможно, нам захочется хранить некоторый объём пользовательских данных или, например, его последние поисковые запросы. В другом случае, может быть, вам захочется хранить более структурированные данные. В любом случае, Web Storage и WebSQL будут лучшим решением.
Используем Web Storage
Web Storage прекрасно подходит для хранения небольших объемов информации, нежели огромных таблиц с данным, о чём кратко и поговорим в этой статье, рассмотрим примеры. Более подробную информацию вы можете узнать в отдельной статье, посвящённой Web Storage.
Существует очень много мест, где частое отключение электричества — обычное явление («Чубайс, привет! :)», — от переводчика). Пользователю приходится сидеть и ждать, когда он сможет продолжить свою работу в Интернете, пока не включат электричество. А представьте, если кто-то оказался в подобной ситуации, заполняя многостраничную форму на каком-либо сайте, набирая большую статью для блога или важного электронного письма. Во время отключения питания (или сядут аккумуляторы) пользователь потеряет все эти данные. Не будет ли лучше, если после входа в сеть, ему будут доступны все несохраненные им записи, с которыми он продолжит работу?
Давайте посмотрим, что можно сделать на странице, содержащей обычное текстовое поле ? Страница должна сохранять всё, что мы набираем, в локальное хранилище каждые несколько секунд, а в случае её перезагрузки или закрытия, страница должна загружать последний сохранённый в поле текст.
Допустим, наша страница содержит поле с id «draft»:
Напишем простую функцию, которая будет сохранять в локальное хранилище содержимое :
function saveMessage()
Установим интервал сохранения в полсекунды:
setInterval(saveMessage, 500);
| Примечание: здесь мы использовали setInterval() для простоты, чтобы сохранять сообщение в локальное хранилище каждые полсекунды. (Вы могли бы улучшить эту процедуру, например, сохраняя содержимое текстового поля только в том случае, если пользователь в него что-то ввёл). |
Также нужно убедиться, что каждый раз, когда страница открывается или перезагружается, в текстовое поле загружалось последнее сохранённое содержимое из локального хранилища (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(), false); window.addEventListener( «online», function(), 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 = «»; >>
| Примечание: в настоящее время поддержка автономного режима реализована только в Opera и Firefox. |
Имеет смысле убедиться, что формы не пытаются отправить данные в то время, когда пользователь работает в автономном режиме. Чтоб проверить это, можем сделать так:
. 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 представляет собой указатель на объект базы данных, который мы и будем в дальнейшем использовать.
| Примечание: размер базы данных устанавливается в байтах. Поэтому мы определили размер в формате 1*1024*1024, что составляет 1 МБ. Если нужно установить размер, например, 4 МБ, следует указывать величину 4*1024*1024 соответственно. |
Работа с базой данных
Мы создали и открыли базу данных. Теперь можно выполнять различные операции над ней, используя 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]); >);
Первый знак вопроса экранирует параметр 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 > ?», [min_cal_amount]);
Этот код выполнит запрос на выборку всех строк со значением calories больше 300: знак вопроса экранирует переменную min_cal_amount.
Обработка результатов запроса
Ну, вот, мы создали базу данных с таблицами, в которые записали данные, теперь мы хотим сделать запрос и вывести полученные результаты. Обычно, мы получаем кучу результатов для одного SQL-запроса и нам нужно как-то обработать эти результаты, чтобы вывести их в виде таблицы или каком-то другом структурированном виде на странице. Третий параметр функции executeSQL() определяет успешность выполнения запроса. Ниже приведён пример обработки результатов:
Сначала мы определяем количество элементов в результате запроса через 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 используются для предоставления возможности работать в автономном режиме.
| Примечание: вы можете самостоятельно получить информацию о том, какие базы данных используются в Opera и управлять ими, перейдя по ссылке opera:webdatabases. А получить информацию о доменах, которые хранят свои данные в браузере, используя Web Storage, и управлять ими, перейдя по ссылке opera:webstorage. |
Подождите… разве спецификации 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, упоминания о которой уже были на хабре. Пусть они сделают мир лучше 🙂
p.s. Все замечания по переводу, как обычно, принимаются в личку.
p.p.s. где-то я, видимо, плавно переехал с «web storage» на «локальное хранилище». Что лучше оставить-то? 😉
Источник: habr.com
HTML5 Web Storage — обзор веб-хранилища
В интернете информацию можно сохранять в двух местах: на веб-сервере и на веб-клиенте (т.е. компьютере посетителя страницы). Определенные типы данных лучше хранить в одном из этих мест, а другие типы — в другом.
Правильным местом для хранения конфиденциальных и важных данных будет веб-сервер. Например, если вы положите какие-либо товары в свою корзину в онлайновом магазине, данные о вашей потенциальной покупке сохраняются на веб-сервере. На вашем компьютере сохраняется лишь несколько байтов данных для отслеживания, содержащих информацию о вас (или, вернее, о вашем компьютере), чтобы веб-сервер знал, какая из корзин ваша. Даже с новыми возможностями HTML5 изменять эту систему нет надобности — она надежная, безопасная и эффективная.
Но хранение данных на сервере не всегда является лучшим подходом, т.к. иногда легче хранить второстепенную информацию на компьютере пользователя. Например, имеет смысл хранить локально пользовательские настройки (скажем, параметры, которые определяют способ отображения веб-страницы) и состояние приложения (снимок текущего состояния веб-приложения), чтобы посетитель мог продолжить его выполнение с того же самого места позже.
До HTML5 единственным способом локального хранения данных было использование механизма файлов cookies, который первоначально был разработан для обмена небольшими объемами идентифицирующей информации между веб-серверами и браузерами. Файлы cookies подходят идеально для хранения небольших объемов данных, но модель JavaScript для работы с ними несколько неуклюжа. Система файлов cookies также вынуждает разработчика возиться со сроками действия и бесполезно пересылать данные туда и обратно по интернету с каждым запросом страницы.
В HTML5 вводится лучшая альтернатива файлам cookies, которая позволяет легко и просто сохранять информацию на компьютере посетителя. Эта информация может храниться на клиентском компьютере неограниченное время, не отправляется на веб-сервер (если только разработчик не сделает это сам), может быть большого объема и для работы с ней требуется всего лишь пара простых, эффективных объектов JavaScript.
Эта возможность называется и особенно хорошо подходит для применения с автономным режимом работы вебсайтов, т.к. позволяет создавать самодостаточные автономные приложения, которые могут сохранять всю требуемую им информацию даже при отсутствии подключения к интернету.
Функциональность веб-хранилища HTML5 позволяет веб-странице сохранять данные на компьютере посетителя. Эта информация может быть кратковременной, которая удаляется после выключения браузера, или долговременной, которая остается доступной при последующих посещениях веб-страницы.
Сохраняемая в веб-хранилище информация в действительности сохраняется не в интернете, а на компьютере посетителя веб-страницы. Иными, словами, веб-хранилище означает хранение данных не в интернете, а хранение данных из интернета.
Существуют два типа веб-хранилищ, которые так или иначе связаны с двумя объектами:
Локальное хранилище
Использует объект localStorage для хранения данных для всего веб-сайта на постоянной основе. Это означает, что если веб-страница сохранит данные в локальном хранилище, эти данные будут доступны для пользователя, когда он возвратится на эту веб-страницу на следующий день, на следующей неделе или в следующем году.
Конечно же, большинство браузеров также предоставляет пользователю возможность очистить локальное хранилище. В некоторых браузерах она реализована как стратегия «все или ничего», и посредством ее удаляются все локальные данные, во многом подобно тому, как удаляются cookies-файлы. (В действительности, в некоторых браузерах система cookies и локальное хранилище взаимосвязаны, так что единственным способом удалить локальные данные будет удаление cookies.) А другие браузеры могут предоставлять пользователю возможность просмотра данных для каждого отдельного веб-сайта и удалять данные для выбранного сайта или сайтов.
Хранилище данных сеансов
Использует объект sessionStorage для временного хранения данных для одного окна или вкладки браузера. Эти данные доступны лишь до тех пор, пока пользователь не закроет окно или вкладку, после чего сеанс заканчивается и данные удаляются. Но данные сеанса сохраняются, если пользователь переходит на другой веб-сайт, а потом возвращается обратно при условии, что это происходит в том же окне браузера.
С точки зрения кода веб-страницы, как локальное хранилище, так и хранилище данных сеансов работают абсолютно одинаково. Разница состоит лишь в длительности хранения данных.
Использование локального хранилища предоставляет наилучшую возможность для сохранения требуемой информации для последующих посещений вебстраницы пользователем. А хранилище сеансов служит для хранения данных, которые нужно передавать от одной страницы другой. (В хранилище сеансов можно также хранить временные данные, используемые только на одной странице, но для этой цели прекрасно работают обычные переменные JavaScript.)
Как локальное хранилище, так и хранилище сеансов связано с доменом веб-сайта. Таким образом, если сохранить в локальном хранилище данные для страницы www.professorweb.ru/index.html, эти данные будут доступны для страницы www.professorweb.ru/contact.html, т.к. обе эти страницы имеют один и тот же домен. Но эти данные не будут доступны для страниц других доменов.
Кроме этого, т.к. веб-хранилище расположено на компьютере (или мобильном устройстве) данного пользователя, оно связано с этим компьютером, и веб-страница, открытая на данном компьютере и хранящая данные в его локальном хранилище, не имеет доступа к информации, которую она сохранила на другом компьютере. Подобным образом веб-страница создает отдельное локальное хранилище, если вы войдете в систему под другим именем пользователя или запустите другой браузер.
Хотя спецификация HTML5 не устанавливает никаких жестких правил в отношении максимального объема хранилища, большинство браузеров ограничивают его 5 Мбайт. В этот объем можно упаковать много данных, но его будет недостаточно, если вы хотите использовать локальное хранилище для оптимизации производительности и кэшировать в нем изображения или видео большого объема (и, по правде говоря, локальное хранилище не предназначено для таких целей).
Для хранения большого объема данных все еще развивающийся стандарт базы данных IndexedDB допускает локальное хранение намного большего объема — обычно 50 Мбайт для начала и больше, по согласию пользователя.
Сохранение данных
Прежде чем поместить фрагмент информации в локальное хранилище или хранилище сеансов, ему необходимо присвоить описательное имя. Это имя называется ключом (key) и нужно для того, чтобы данные можно было извлечь в будущем.
Синтаксис для сохранения фрагмента данных следующий:
localStorage[keyName] = data;
Допустим, например, что нам нужно сохранить фрагмент текста, присвоив ему имя текущего пользователя. Для этих данных мы можем использовать ключ username:
// JS localStorage[«username»] = «Ivan Petrov»;
Конечно же, сохранять фрагмент статического текста не имеет смысла. Как правило нам требуется сохранять какие-либо переменные данные, например текущую дату, результат математического вычисления или текстовые данные, введенные пользователем в поля формы. Далее приведен пример сохранения введенных пользователем текстовых данных:
Веб-хранилище Этот текст сохранится в локальном хранилище:
Этот текст сохранится в хранилище данных сессии: Сохранить Загрузить
function saveData() < // Получаем значения текстовых полей var localData = document.getElementById(«localData»).value; var sessionData = document.getElementById(«sessionData»).value; // Сохраняем текст, введенный в текстовом поле, в локальном хранилище localStorage[«localData»] = localData; // Сохраняем текст, введенный в текстовом поле, в хранилище сессий sessionStorage[«sessionData»] = sessionData; >function loadData() < // Загружаем сохраненные данные из хранилищ var localData = localStorage[«localData»]; var sessionData = sessionStorage[«sessionData»]; // Отображаем эти данные в текстовых полях if (localData != null) < document.getElementById(«localData»).value = localData; >if (sessionData != null) < document.getElementById(«sessionData»).value = sessionData; >>
Страница содержит два текстовых поля: для локального хранилища (вверху) и для хранилища сеансов (внизу). Нажатие кнопки «Сохранить» сохраняет текст, введенный в текстовые поля, а нажатие кнопки «Загрузить» выводит в полях соответствующие сохраненные данные.
Веб-хранилище также поддерживает менее распространенный синтаксис свойств. Согласно правилам этого синтаксиса, мы обращаемся к ячейке хранения с именем username как localStorage.username, а не localStorage[«username»]. Оба типа синтаксиса равнозначны, и использование того или другого является вопросом личного предпочтения.
Веб-хранилище не работает без веб-сервера
В своих исследованиях веб-хранилища вы можете столкнуться с неожиданной проблемой. Во многих браузерах веб-хранилище работает только для страниц, предоставленных веб-сервером. При этом не важно, где расположен сервер, в интернете или на вашем собственном компьютере, самое главное, просто чтобы страницы не запускались с локального жесткого диска (например, двойным щелчком по значку файла страницы).
Эта особенность является побочным эффектом способа, которым браузеры выделяют место в локальное хранилище. Как ранее говорилось, браузеры ограничивают локальное хранилище для каждого веб-сайта 5 Мбайт, для чего им нужно ассоциировать каждую страницу, которая хочет использовать локальное хранилище, с доменом вебсайта.
Что же происходит, если открыть страницу, которая использует веб-хранилище, с локального жесткого диска? Все зависит от браузера. Браузер Internet Explorer, похоже, полностью утрачивает поддержку веб-хранилища. Объекты localStorage и sessionStorage исчезают, и попытка использовать их вызывает ошибку JavaScript.
В браузере Firefox объекты localStorage и sessionStorage остаются на месте и, вроде бы, поддерживаются (даже Modernizr определяет, что поддерживаются), но все, что отправляется на хранение, исчезает неведомо куда. В браузере Chrome опять же что-то другое — большая часть функциональности веб-хранилища работает как следует, но некоторые возможности (например, событие onStorage) не работают.
Подобные проблемы возникают и с использованием интерфейса File API. Поэтому вы избавите себя от многих хлопот, если поместите тестируемую страницу на тестовый сервер, чтобы избежать всех этих неопределенностей.
Поддержка веб-хранилища браузерами
Веб-хранилище является одной из наиболее поддерживаемой возможностью HTML5, с хорошим уровнем поддержки в каждом основном браузере. В таблице ниже приведены минимальные версии основных браузеров, поддерживающих веб-хранилище:
| Браузер | IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android |
| Минимальная версия | 8 | 3.5 | 5 | 4 | 10.5 | 2 | 2 |
Все эти браузеры предоставляют возможность локального хранилища и хранилища данных сеанса. Но для поддержки события onStorage требуются более поздние версии браузеров, например IE 9, Firefox 4 или Chrome 6.
Самой проблемной является версия IE 7, которая не поддерживает веб-хранилище вообще. В качестве обходного решения можно эмулировать веб-хранилище посредством файлов cookies. Это не совсем идеальное решение, но оно работает. Хотя официального сценария для закрытия этого пробела не существует, несколько хороших отправных точек можно найти на странице HTML5 Cross Browser (в разделе «Web Storage»).
Источник: professorweb.ru