Что такое web storage

Web Storage API: примеры использования

Доброго времени суток, друзья!

В данной статье мы рассмотрим парочку примеров использования Web Storage API или объекта «Storage».

Что конкретно мы будем делать?

Краткий обзор

Объект «Storage» используется для хранения данных на стороне клиента и в этом смысле выступает альтернативой cookies. Преимущество Storage состоит в размере хранилища (от 5 Мб, зависит от браузера, при превышении лимита выбрасывается ошибка «QUOTA_EXCEEDED_ERR») и отсутствии необходимости обращаться к серверу. Существенный недостаток — безопасность: стоит вредоносному скрипту получить доступ к странице, и пиши пропало. Поэтому крайне не рекомендуется хранить в Storage конфиденциальную информацию.

Справедливости ради стоит отметить, что на сегодняшний день существуют более продвинутые решения для хранения данных на стороне клиента — это IndexedDB, Service Workers + Cache API и др.

О сервис-воркерах можно почитать здесь.

Web Storage API включает в себя localStorage и sessionStorage. Разница между ними состоит во времени хранения данных. В localStorage данные хранятся постоянно до их «явного» удаления (ни перезагрузка страницы, ни ее закрытие не приводят к удалению данных). Время хранения данных в sessionStorage, как следует из названия, ограничено сессией браузера. Поскольку sessionStorage на практике почти не используется, мы будет рассматривать только localStorage.

Что необходимо знать о localStorage?

Данные в хранилище записываются одним из следующих способов:

Получить данные можно так:

Как перебрать ключи хранилища и получить значения?

Как мы отмечали выше, данные в хранилище имеют строковый формат, поэтому с записью объектов возникают некоторые трудности, которые легко решаются с помощью тандема JSON.stringify() — JSON.parse():

Для взаимодействием с localStorage существует специальное событие — storage (onstorage), которое возникает при записи/удалении данных. Оно имеет следующие свойства:

Допускает ли localStorage прототипирование?

Как проверить наличие данных в localStorage?

В браузере localStorage можно найти здесь:

Довольно слов, пора переходить к делу.

Примеры использования

Запоминаем время воспроизведения видео

Результат выглядит так:

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

Работаем с формой для входа

Разметка выглядит так:

Обратите внимание, что мы не «валидируем» форму. Это, в частности, позволяет записывать пустые строки в качестве логина и пароля.

Результат выглядит так:

Вводим волшебные слова.

Данные записываются в localStorage, а на страницу выводится приветствие.

Пишем логику списка задач

Разметка выглядит так:

У нас имеется «инпут» для ввода задачи, кнопка для добавления задачи в список, кнопка для очистки списка и хранилища и контейнер для списка.

Результат выглядит так:

Задачи, добавляемые в список, сохраняются в localStorage в виде готовой разметки. При перезагрузке страницы список формируется из данных хранилища (имеет место перемешивание, о котором упоминалось выше).

Удаление задачи из списка посредством нажатия зеленой галочки приводит к удалению соответствующей пары ключ/значение из хранилища.

Реализация чата

Разметка выглядит так:

У нас имеется инпут для ввода сообщения, три кнопки: для отправки сообщения, для сохранения переписки и для очистки чата и хранилища, а также контейнер для сообщений.

Результат выглядит так:

Отправляемое сообщение записывается в localStorage.message. Событие «storage» позволяет организовать обмен сообщениями между вкладками браузера.

При сохранении чата все сообщения записываются в localStorage.messages. При перезагрузке страницы из записанных сообщений формируется переписка.

Схема корзины для товаров

Мы не преследуем цель создать полнофункциональную корзину, поэтому код будет написан «в старом стиле».

Разметка одного товара выглядит так:

У нас имеется контейнер для товара, наименование, изображение и цена товара, а также кнопка для добавления товара в корзину.

Также у нас имеется контейнер для кнопок отображения содержимого корзины и очистки корзины и хранилища и контейнер для корзины.

Результат выглядит так:

Выбранные товары записываются в хранилище в виде одной пары ключ/значение.

При нажатии кнопки «Cart» данные из localStorage выводятся в таблицу, подсчитывается общее количество товаров и их стоимость.

Источник

«Переезжаем» в офлайн: Web Storage, Application Cache и WebSQL

Чтобы делать приложения, которые могут работать в полностью автономном режиме, нам нужно познакомиться со следующими технологиями: HTML5 Application Cache, Web Storage и WebSQL.
Мной уже были опубликованы вводные статьи, касающиеся Web Storage и HTML5 Application Cache. Рекомендую их к прочтению если вы еще не знакомы с основными понятиями. В данной статье будут пересмотрены эти технологии, в том числе и WebSQL, и описаны варианты их совместного эффективного использования. Все эти технологии поддерживаются настольной версией браузера Opera 11.10, Opera Mobile 11, браузерами на движке WebKit (в iOS и Google Android).

Зачем вообще нужен «офлайн-режим»?

Кэш: грузимся и при отсутствии сети

В общем случае, если мы не в сети, то при загрузке или перезагрузке страниц сайта мы получим ошибку. Первое, что нужно сделать — убедиться, что наши пользователи могу видеть страницы и работать с веб-приложением даже при отсутствующем подключении, т.е. все картинки, CSS, JavaScript и сама HTML-страница должны корректно загружаться в этом режиме.
Достигается это путем использования технологии Application Cache (называемую также AppCache). Чтобы её использовать, нужно для начала объявить manifest-файл, в котором указать имена файлов, которые необходимы приложению для работы офлайн.
Пример файла demo.manifest:

Какие бы ссылки ни содержал этот manifest-файл, соответствующее содержимое помещается в кэш, и впоследствии к этому содержимому уже будет доступ. Объявить manifest-файл очень просто — нужно использоваться атрибут manifest элемента :

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

Что насчет данных?

AppCache решает задачу доступности некоторых элементов сайта в офлайне, но, возможно, нам захочется хранить некоторый объём пользовательских данных или, например, его последние поисковые запросы. В другом случае, может быть, вам захочется хранить более структурированные данные. В любом случае, Web Storage и WebSQL будут лучшим решением.

Используем Web Storage

Напишем простую функцию, которая будет сохранять в локальное хранилище содержимое

Установим интервал сохранения в полсекунды:

Также нужно убедиться, что каждый раз, когда страница открывается или перезагружается, в текстовое поле загружалось последнее сохранённое содержимое из локального хранилища (localStorage):

Посмотрите пример работы с Web Storage. Это вообще шикар
ная вещь, если вам нужно сохранять локально небольшие кусочки информации.

Работаем в автономном режиме

Для перехода в автономный режим нужно его, собственно, активировать (в браузере Opera: «Меню» → «Настройки» → «Работать автономно» либо «Файл» → «Работать автономно»). Свойство navigator.onLine имеет значение false в случае, если браузер находится в автономном режиме, в противном случае оно имеет значение true. Однако, во многих случаях лучше было бы использовать события. Когда пользователь переключается в автономный режим, срабатывает событие offline, когда переключается обратно — соответственно online. Можно воспользоваться этим для вывода небольшого сообщения о переходе в автономный режим.
Получится что-то типа этого:

Имеет смысле убедиться, что формы не пытаются отправить данные в то время, когда пользователь работает в автономном режиме. Чтоб проверить это, можем сделать так:

При отправке данных формы срабатывает событие submit, которое вызывает функцию submitForm(). Эта функция сначала сохранит сообщение в локальном хранилище, затем, если пользователь работает в автономном режиме, данные никуда не отправятся.
Вы можете усовершенствовать этот пример, чтобы он сохранял копию на сервер каждые несколько секунд, чтобы там она была доступна на тот случай, если пользователь случайно удалит данные у себя. Это особенно важно в тех случаях работы, например, с конфиденциальной информацией: вы, скажем, хотите, чтобы информация о вашей кредитной карте хранилась только у вас — в локальном хранилище.
Посмотрите также более продвинутый пример, который использует для хранение информации sessionStorage. Если вы не закрываете страницу (даже в случае её перезагрузки) текст, введённый в текстовое поле, там и останется. Страница также будет отправлять содержимое этого поля на сервер каждые несколько секунд и, соответственно, обновлять время последнего сохранения. Данный подход может использоваться в блоговых движках и сервисах электронной почты для периодического сохранения «черновиков», что позволит продолжить работу в случае проблем с подключением.

WebSQL: еще «глужбе» в офлайн

Web Storage прекрасно подходит для хранения небольших объемов информации, а что если мы захотим хранить целую базу данных? Как насчёт того, чтобы веб-приложение могло делать различные запросы к базе данных, поиск по ней?
Здесь Web Storage уже не позволит развернуться — нужно что-то более надёжное. А именно — WebSQL. WebSQL представляет собой локальную SQLite базу данных, в которой вы можете хранить свои данные, используя комбинацию Javascript и SQL.

Работа с WebSQL-базами данных

Перво-наперво нужно убедиться, поддерживает ли браузер WebSQL? Сделать это можно через свойство window.openDatabase:

Создание и открытие базы данных

Создать и открыть базу данных можно, используя команду openDatabase, так:

Мы только что создали базу данных food_db «версии» 1.0, с описанием «Web SQL Storage Demo Database», размером 1 МБ. Переменная db представляет собой указатель на объект базы данных, который мы и будем в дальнейшем использовать.

Работа с базой данных

Мы создали и открыли базу данных. Теперь можно выполнять различные операции над ней, используя SQL-команды. Операции мы будем производить, вызывая функцию transaction() объекта базы данных (в нашем случае это db). Её вызов возвращает объект в качестве указателя, над которым мы будем выполнять различные команды, используя executeSQL(). Синтаксис этой команды следующий:

Из параметров только sqlStatement является обязательным, остальные — необязательные.
Так, например, если мы хотим создать таблицу, нужно будет написать следующее:

Этот код создаст таблицу cal_list (если её не существовало) с полями food_name, calories и servings.

Добавление записей в таблицу

Выполнять запросы на добавление записей в таблицу — простая задача для WebSQL. Рассмотрим пример:

Первый знак вопроса экранирует параметр food_name, второй — amount_of_calories, а третий — serving_size. Этот код добавляет запись в таблицу cal_list со значениями: pizza, 320 и one slice соответствующие столбцы.
Выполним другой запрос — на получение данных:

Этот код выполнит запрос на выборку всех строк со значением 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 используются для предоставления возможности работать в автономном режиме.

Подождите… разве спецификации 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, упоминания о которой уже были на хабре. Пусть они сделают мир лучше 🙂

Источник

Asus webstorage чем хорош этот облачный сервис и надёжен ли он?

ASUS webstorage что это за программа?

Добрый день. Я сам об этом ресурсе узнал не так давно. Это хранение вашей информации в сервисе компании ASUS. Что-то вроде облачного хранения информации данной компании. Этот облачный сервис, как и похож, так и отличается от других подобных. В нём есть как преимущества, так и минусы, по сравнению с другими похожими сервисами.

Я думаю, прочитав название, вы уже поняли владелец сервиса webstorage. Поэтому, про компанию мы говорить не станем. Если кто интересуется, может посмотреть в Яндексе или Википедии. Многие компании уже довольно давно дают возможность людям сохранять свои данные в облачном пространстве.

К примеру, взять тот же Google, Yandex, Mail и прочие похожие компании.

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

Данное облако на настоящее время в Рунете не особо популярно. Но, оно в Буржунете набирает всё больше поклонников, которых на данный момент более 30000000 пользователей. Число приличное. Скорее всего, я привык к обычным наших облачным серверам, вроде Яндекса, поэтому от сервиса ASUS пока не в особом восторге.

Какие у webstorage преимущества?

Что ещё добавим? Данные находятся под надёжным шифром. Злоумышленники вашу информацию похитить не смогут. Если вам это уже нравится, можно смело регистрироваться. В этом случае, вы получите целых пять гигабайт дискового пространства бесплатно! Если же вы желаете получить больший объём этого облака, придётся раскошелиться. У webstorage есть свои тарифы. Итак, вам стало ясно, в чем необходимость данного облака. Но, теперь для желающих, давайте разберём процесс регистрации.

Как зарегистрироваться в webstorage?

Вводим адрес с паролем и «далее».

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

В новом окошке нажимаем «i agree», что означает «я согласен».

Теперь переходим непосредственно в окно сервиса. 1 Тб у них стоит всего каких-то 13,49$. Так что, желающие получить терабайт – вперёд! После регистрации, незабываем подтвердить свою личность по ссылочке в письме, в этом случае вы и получаете 5 Гб памяти. Иначе, всего 3 Гб.

Войдя в окно сервиса, выбираем слева меню MySyncFolder. В данную папочку вы и будете теперь помещать важную информацию с разных гаджетов. Чтобы добавить какаю-ни будь папочку, жмём «Добавить».

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

Мы сейчас вкратце рассмотрели облако webstorage. Также, разобрали его плюсы. Теперь, предлагаю также вкратце рассмотреть минусы данного сервиса.

Недостатки сервиса webstorage

Итак, достоинства сервиса мы перечислили, главным из которых является хорошее шифрование информации. Но, особых достоинств этого облака, по сравнению с конкурентами, я не увидел.

Но, как говорится, на вкус и цвет. Я выражаю свою точку зрения. Вполне возможно, что кому-то из вас этот сервис придётся очень даже по душе. Скажу сразу, я не знаю всех его особенностей! Также, я подозреваю, что по поводу скорости загрузки и скачивания, данный сервис всё наладит и ускорит!

А вы пользовались сервисом ASUS webstorage? И как он вам, понравился? Просьба поделиться в комментариях! Успехов!

Источник

ASUS Webstorage: что это за программа и насколько целесообразно использование этого сервиса?

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

Webstorage: что это за программа?

Вам будет интересно: Как установить фавикон на сайт? Как создать фавикон

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

Если говорить о том, что это за программа, Webstorage представляет собой «вшитое» в ноутбуки ASUS специализированное приложение, которое находится предустановленном виде, хотя в состав основных компонентов Windows и не входит. Собственно, в чем-то этот программный продукт напоминает многие известные сервисы вроде того же OneDrive (SkyDrive), Google Drive, Dropbox и т. д., но как уже понятно, изначально инсталлируется в качестве предпочитаемого удаленного хранилища исключительно на компьютерных устройствах ASUS. Но у многих возникают законные вопросы по поводу того, что такое Webstorage в «Виндовс 10» и как уживаются два аналогичных программных продукта в одной системе, ведь весьма сомнительным выглядит, что Microsoft согласится уступить пальму первенства в виде OneDrive конкурентам. По по всей видимости, существует какое-то негласное соглашение, которое и обуславливает наличие предустановленного приложения ASUS в операционных системах от Microsoft.

Основные достоинства и недостатки сервиса

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

Вроде бы все удобно и хорошо, но многим (особенно на постсоветском пространстве) это сервис пришелся не по душе. Во-первых, на сегодняшний день выделение бесплатного дискового пространства ограничено всего 5 Гб, которое можно увеличить до 15 путем дополнительной регистрации в Microsoft, а вот за 500 Гб придется заплатить порядка 90 долларов в год. И это при том что тот же «Яндекс.Диск» изначально позволяет подключить бесплатно аж 300 Гб.

Но самое главное, что явно отпугивает пользователей, это проблема загрузки файлов на жесткий диск из хранилища Webstorage. Что это за программа, в которой, например, объемы около 5-6 Гб скачивать нужно неделю (а то и больше)? Тут – явный минус. Кроме того, очень многие пользователи сетуют на недоработанный интерфейс и некоторое неудобство управления основными элементами. Но здесь, как говорится, на вкус и цвет…

Регистрация пользователя

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

Насколько это целесообразно, каждый решает сам.

Можно ли удалить Webstorage и как это сделать?

Если же ни хранилище, ни предустановленная программа вам не нужны, избавиться от нее на собственном ноутбуке можно достаточно просто, даже несмотря на то, что приложение является как бы «вшитым» в системную оболочку.

Удалить ее стандартными методами получается, но попробовать можно.

А вот при использовании продвинутых деинсталляторов вроде iObit Uninstaller процесс удаления выглядит максимально простым и полным, поскольку программа не только автоматически чистит остатки на жестком диске и в системном реестре, но еще никогда не спрашивает разрешения на удаление того или иного (пусть даже системного) приложения. После деинсталляции ничего катастрофичного не случится, а система будет работать, как и прежде (разве что файлы в хранилище не сможете забросить).

Вот кратко и все, что касается сервиса Webstorage. Что это за программа, разобрались. Нужна она пользователю или нет, однозначно ответить сложно, хотя ввиду того, что сегодня можно найти массу более перспективных разработок, можно с высокой долей уверенности утверждать, что при текущем состоянии сервиса особого смысла в его использовании нет. Но, согласно западной статистике, где это хранилище пользуется популярностью, по разным оценкам, число зарегистрированных пользователей находится на уровне 24-30 миллионов.

Источник