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) вашего устройства.

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

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

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

Web Storage прекрасно подходит для хранения небольших объемов информации, нежели огромных таблиц с данным, о чём кратко и поговорим в этой статье, рассмотрим примеры. Более подробную информацию вы можете узнать в отдельной статье, посвящённой Web Storage .
Существует очень много мест, где частое отключение электричества - обычное явление («Чубайс, привет! :)», - от переводчика). Пользователю приходится сидеть и ждать, когда он сможет продолжить свою работу в Интернете, пока не включат электричество. А представьте, если кто-то оказался в подобной ситуации, заполняя многостраничную форму на каком-либо сайте, набирая большую статью для блога или важного электронного письма. Во время отключения питания (или сядут аккумуляторы) пользователь потеряет все эти данные. Не будет ли лучше, если после входа в сеть, ему будут доступны все несохраненные им записи, с которыми он продолжит работу?
Давайте посмотрим, что можно сделать на странице, содержащей обычное текстовое поле </i>? Страница должна сохранять всё, что мы набираем, в локальное хранилище каждые несколько секунд, а в случае её перезагрузки или закрытия, страница должна загружать последний сохранённый в поле текст.<br> Допустим, наша страница содержит поле <i><textarea> </i> с <i>id </i> «draft»:<br> ... <textarea id="draft" rows="10" cols="30"> ...
Напишем простую функцию, которая будет сохранять в локальное хранилище содержимое </i>:<br> function saveMessage(){ var message = document.getElementById("draft"); localStorage.setItem("message", message.value) } <br> Установим интервал сохранения в полсекунды:<br> setInterval(saveMessage, 500); <br><br> Также нужно убедиться, что каждый раз, когда страница открывается или перезагружается, в текстовое поле загружалось последнее сохранённое содержимое из локального хранилища (<i>localStorage </i>):<br> 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; } } <br> Посмотрите пример работы с Web Storage . Это вообще шикар<br> ная вещь, если вам нужно сохранять локально небольшие кусочки информации.<h3>Работаем в автономном режиме</h3> Для перехода в автономный режим нужно его, собственно, активировать (в браузере Opera: «Меню» → «Настройки» → «Работать автономно» либо «Файл» → «Работать автономно»). Свойство <i>navigator.onLine </i> имеет значение <i>false </i> в случае, если браузер находится в автономном режиме, в противном случае оно имеет значение <i>true </i>. Однако, во многих случаях лучше было бы использовать события. Когда пользователь переключается в автономный режим, срабатывает событие <i>offline </i>, когда переключается обратно - соответственно <i>online </i>. Можно воспользоваться этим для вывода небольшого сообщения о переходе в автономный режим.<br> Получится что-то типа этого:<br> ... 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 = "<p style=\"padding:3px;\">Right now you are in offline mode. This message is saved and will be sent to the server the next time you are online.</p>"; } else { warningdiv.innerHTML = ""; } } <br><br> Имеет смысле убедиться, что формы не пытаются отправить данные в то время, когда пользователь работает в автономном режиме. Чтоб проверить это, можем сделать так:<br> ... window.addEventListener("submit", submitForm, false); ... function submitForm(){ saveMessage(); if (!navigator.onLine){ return false; } } <br> При отправке данных формы срабатывает событие <i>submit </i>, которое вызывает функцию <i>submitForm() </i>. Эта функция сначала сохранит сообщение в локальном хранилище, затем, если пользователь работает в автономном режиме, данные никуда не отправятся.<br> Вы можете усовершенствовать этот пример, чтобы он сохранял копию на сервер каждые несколько секунд, чтобы там она была доступна на тот случай, если пользователь случайно удалит данные у себя. Это особенно важно в тех случаях работы, например, с конфиденциальной информацией: вы, скажем, хотите, чтобы информация о вашей кредитной карте хранилась только у вас - в локальном хранилище.<br> Посмотрите также более продвинутый пример , который использует для хранение информации <i>sessionStorage </i>. Если вы не закрываете страницу (даже в случае её перезагрузки) текст, введённый в текстовое поле, там и останется. Страница также будет отправлять содержимое этого поля на сервер каждые несколько секунд и, соответственно, обновлять время последнего сохранения. Данный подход может использоваться в блоговых движках и сервисах электронной почты для периодического сохранения «черновиков», что позволит продолжить работу в случае проблем с подключением.<h3>WebSQL: еще «глужбе» в офлайн</h3> Web Storage прекрасно подходит для хранения небольших объемов информации, а что если мы захотим хранить целую базу данных? Как насчёт того, чтобы веб-приложение могло делать различные запросы к базе данных, поиск по ней?<br> Здесь Web Storage уже не позволит развернуться - нужно что-то более надёжное. А именно - WebSQL. WebSQL представляет собой локальную SQLite базу данных, в которой вы можете хранить свои данные, используя комбинацию Javascript и SQL.<h5>Работа с WebSQL-базами данных</h5> Перво-наперво нужно убедиться, поддерживает ли браузер WebSQL? Сделать это можно через свойство <i>window.openDatabase </i>:<br> 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 } <h5>Создание и открытие базы данных</h5> Создать и открыть базу данных можно, используя команду <i>openDatabase </i>, так:<br> 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. <br> Мы только что создали базу данных <i>food_db </i> «версии» 1.0, с описанием <i>«Web SQL Storage Demo Database» </i>, размером 1 МБ. Переменная <i>db </i> представляет собой указатель на объект базы данных, который мы и будем в дальнейшем использовать.<br><h5>Работа с базой данных</h5> Мы создали и открыли базу данных. Теперь можно выполнять различные операции над ней, используя SQL-команды. Операции мы будем производить, вызывая функцию <i>transaction() </i> объекта базы данных (в нашем случае это <i>db </i>). Её вызов возвращает объект в качестве указателя, над которым мы будем выполнять различные команды, используя <i>executeSQL() </i>. Синтаксис этой команды следующий:<br> executeSql(sqlStatement, arguments, callback, errorCallback); <br> Из параметров только <i>sqlStatement </i> является обязательным, остальные - необязательные.<br> Так, например, если мы хотим создать таблицу, нужно будет написать следующее:<br> ... 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)"); }); ... <br> Этот код создаст таблицу <i>cal_list </i> (если её не существовало) с полями <i>food_name </i>, <i>calories </i> и <i>servings </i>.<h5>Добавление записей в таблицу</h5> Выполнять запросы на добавление записей в таблицу - простая задача для WebSQL. Рассмотрим пример:<br> 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 (?, ?, ?)", ); }); <br> Первый знак вопроса экранирует параметр <i>food_name </i>, второй - <i>amount_of_calories </i>, а третий - <i>serving_size </i>. Этот код добавляет запись в таблицу <i>cal_list </i> со значениями: <i>pizza </i>, <i>320 </i> и <i>one slice </i> соответствующие столбцы.<br> Выполним другой запрос - на получение данных:<br> var min_cal_amount = 300; ... t.executeSql("SELECT * FROM cal_list WHERE calories > ?", ); <br> Этот код выполнит запрос на выборку всех строк со значением <i>calories </i> больше 300: знак вопроса экранирует переменную <i>min_cal_amount </i>.<h5>Обработка результатов запроса</h5> Ну, вот, мы создали базу данных с таблицами, в которые записали данные, теперь мы хотим сделать запрос и вывести полученные результаты. Обычно, мы получаем кучу результатов для одного SQL-запроса и нам нужно как-то обработать эти результаты, чтобы вывести их в виде таблицы или каком-то другом структурированном виде на странице. Третий параметр функции executeSQL() определяет успешность выполнения запроса. Ниже приведён пример обработки результатов:<br> 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 +="<li>"+food+" has "+amount_of_calories+" KCAL worth of calories.</li>"; } }, function(t,e) {alert(e.message);}) }); <br> Сначала мы определяем количество элементов в результате запроса через <i>r.rows.length </i> и пробегаемся от 0 до этого значения. Каждый элемент доступен по <i>r.rows.item(i) </i>, где i - номер строки. Названия столбцов можно получить так же. Для получения получения значения столбца <i>food </i> используем <i>r.rows.item(i).food </i> и так далее для других столбцов.<h1>Используем всё и сразу</h1> Не исключено, что вам захочется использовать Web Storage, Application Cache и WebSQL вместе. Это возможно, всё зависит от задач, которые нужно решить. Например, если вы хотите хранить всего лишь некоторые пользовательские настройки, будет излишеством использовать WebSQL. Для подобных целей лучше подойдёт Web Storage.<br> Однако, если у вас большой объём данных, и нужно их как-то обрабатывать, то логичнее было бы использовать WebSQL.<br> Посетите страницу с примером про калории, на которой используются вместе все три технологии : база данных хранится в Web Storage, так что вы сможете искать даже если закроете или перезагрузите страницу, AppCache и WebSQL используются для предоставления возможности работать в автономном режиме.<br><h1>Подождите… разве спецификации WebSQL утверждены?</h1> Ещё не окончательно. Но вы уже можете применять эту технологию на приведённом списке браузеров и устройств. Чего нельзя сказать о IndexedDB, у которой нет такой кросс-платформенной поддержки. Осталось только дождаться утверждения спецификации, что и произойдёт в скором времени.<br> Важно также отметить, что некоторые настольные версии браузеров, такие как Firefox и Internet Explorer, не будут поддерживать WebSQL, они будут работать с IndexedDB. В этом случае, первое, где можно применить WebSQL - автономное хранилище данных для смартфонов: поддерживаются браузеры Opera Mobile 11, а также браузеры на движке WebKit для платфом Android и iOS.<br> Хорошая новость о WebSQL заключается в том, что он предлагает удобный инструмент для создания автономной базы данных в браузере. Он лёгок в изучении и применении и позволяет быстро разработать автономное веб-приложение, которое будет сразу работать в нескольких браузерах.<h1>Заключение</h1> Веб-приложения теперь получили возможность работать в полностью автономном режиме, используя такие технологии, как Application Cache, Web Storage и WebSQL базы данных. Application Cache нам нужен для кэширования файлов, чтоб исползовать их в автономном режиме; Web Storage - для хранения небольших объёмов информации, ну а WebSQL будет удобным инструментом для работы с большими объёмами данных. Разработчики в зависимости от потребностей могут использовать различное сочетание этих технологий, для создания автономных приложений.<p>Технология перспективная. И, как обычно, будут гонки… WebSQL и IndexedDB, упоминания о которой уже Добавить метки</p> AppCache решает задачу доступности некоторых элементов сайта в офлайне, но, возможно, нам захочется хранить некоторый объём пользовательских данных или, например, его последние поисковые запросы. В другом случае, может быть, вам захочется хранить более структурированные данные. В любом случае, Web Storage и WebSQL будут лучшим решением.<h3>Используем Web Storage</h3> Web Storage прекрасно подходит для хранения небольших объемов информации, нежели огромных таблиц с данным, о чём кратко и поговорим в этой статье, рассмотрим примеры. Более подробную информацию вы можете узнать в отдельной статье, посвящённой Web Storage .<br> Существует очень много мест, где частое отключение электричества - обычное явление («Чубайс, привет! :)», - от переводчика). Пользователю приходится сидеть и ждать, когда он сможет продолжить свою работу в Интернете, пока не включат электричество. А представьте, если кто-то оказался в подобной ситуации, заполняя многостраничную форму на каком-либо сайте, набирая большую статью для блога или важного электронного письма. Во время отключения питания (или сядут аккумуляторы) пользователь потеряет все эти данные. Не будет ли лучше, если после входа в сеть, ему будут доступны все несохраненные им записи, с которыми он продолжит работу?<br> Давайте посмотрим, что можно сделать на странице, содержащей обычное текстовое поле <i><textarea> </i>? Страница должна сохранять всё, что мы набираем, в локальное хранилище каждые несколько секунд, а в случае её перезагрузки или закрытия, страница должна загружать последний сохранённый в поле текст.<br> Допустим, наша страница содержит поле <i><textarea> </i> с <i>id </i> «draft»:<br> ... <textarea id="draft" rows="10" cols="30"> ...
Напишем простую функцию, которая будет сохранять в локальное хранилище содержимое </i>:<br> function saveMessage(){ var message = document.getElementById("draft"); localStorage.setItem("message", message.value) } <br> Установим интервал сохранения в полсекунды:<br> setInterval(saveMessage, 500); <br><br> Также нужно убедиться, что каждый раз, когда страница открывается или перезагружается, в текстовое поле загружалось последнее сохранённое содержимое из локального хранилища (<i>localStorage </i>):<br> 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; } } <br> Посмотрите пример работы с Web Storage . Это вообще шикар<br> ная вещь, если вам нужно сохранять локально небольшие кусочки информации.<h3>Работаем в автономном режиме</h3> Для перехода в автономный режим нужно его, собственно, активировать (в браузере Opera: «Меню» → «Настройки» → «Работать автономно» либо «Файл» → «Работать автономно»). Свойство <i>navigator.onLine </i> имеет значение <i>false </i> в случае, если браузер находится в автономном режиме, в противном случае оно имеет значение <i>true </i>. Однако, во многих случаях лучше было бы использовать события. Когда пользователь переключается в автономный режим, срабатывает событие <i>offline </i>, когда переключается обратно - соответственно <i>online </i>. Можно воспользоваться этим для вывода небольшого сообщения о переходе в автономный режим.<br> Получится что-то типа этого:<br> ... 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 = "<p style=\"padding:3px;\">Right now you are in offline mode. This message is saved and will be sent to the server the next time you are online.</p>"; } else { warningdiv.innerHTML = ""; } } <br><br> Имеет смысле убедиться, что формы не пытаются отправить данные в то время, когда пользователь работает в автономном режиме. Чтоб проверить это, можем сделать так:<br> ... window.addEventListener("submit", submitForm, false); ... function submitForm(){ saveMessage(); if (!navigator.onLine){ return false; } } <br> При отправке данных формы срабатывает событие <i>submit </i>, которое вызывает функцию <i>submitForm() </i>. Эта функция сначала сохранит сообщение в локальном хранилище, затем, если пользователь работает в автономном режиме, данные никуда не отправятся.<br> Вы можете усовершенствовать этот пример, чтобы он сохранял копию на сервер каждые несколько секунд, чтобы там она была доступна на тот случай, если пользователь случайно удалит данные у себя. Это особенно важно в тех случаях работы, например, с конфиденциальной информацией: вы, скажем, хотите, чтобы информация о вашей кредитной карте хранилась только у вас - в локальном хранилище.<br> Посмотрите также более продвинутый пример , который использует для хранение информации <i>sessionStorage </i>. Если вы не закрываете страницу (даже в случае её перезагрузки) текст, введённый в текстовое поле, там и останется. Страница также будет отправлять содержимое этого поля на сервер каждые несколько секунд и, соответственно, обновлять время последнего сохранения. Данный подход может использоваться в блоговых движках и сервисах электронной почты для периодического сохранения «черновиков», что позволит продолжить работу в случае проблем с подключением.<h3>WebSQL: еще «глужбе» в офлайн</h3> Web Storage прекрасно подходит для хранения небольших объемов информации, а что если мы захотим хранить целую базу данных? Как насчёт того, чтобы веб-приложение могло делать различные запросы к базе данных, поиск по ней?<br> Здесь Web Storage уже не позволит развернуться - нужно что-то более надёжное. А именно - WebSQL. WebSQL представляет собой локальную SQLite базу данных, в которой вы можете хранить свои данные, используя комбинацию Javascript и SQL.<h5>Работа с WebSQL-базами данных</h5> Перво-наперво нужно убедиться, поддерживает ли браузер WebSQL? Сделать это можно через свойство <i>window.openDatabase </i>:<br> 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 } <h5>Создание и открытие базы данных</h5> Создать и открыть базу данных можно, используя команду <i>openDatabase </i>, так:<br> 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. <br> Мы только что создали базу данных <i>food_db </i> «версии» 1.0, с описанием <i>«Web SQL Storage Demo Database» </i>, размером 1 МБ. Переменная <i>db </i> представляет собой указатель на объект базы данных, который мы и будем в дальнейшем использовать.<br><h5>Работа с базой данных</h5> Мы создали и открыли базу данных. Теперь можно выполнять различные операции над ней, используя SQL-команды. Операции мы будем производить, вызывая функцию <i>transaction() </i> объекта базы данных (в нашем случае это <i>db </i>). Её вызов возвращает объект в качестве указателя, над которым мы будем выполнять различные команды, используя <i>executeSQL() </i>. Синтаксис этой команды следующий:<br> executeSql(sqlStatement, arguments, callback, errorCallback); <br> Из параметров только <i>sqlStatement </i> является обязательным, остальные - необязательные.<br> Так, например, если мы хотим создать таблицу, нужно будет написать следующее:<br> ... 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)"); }); ... <br> Этот код создаст таблицу <i>cal_list </i> (если её не существовало) с полями <i>food_name </i>, <i>calories </i> и <i>servings </i>.<h5>Добавление записей в таблицу</h5> Выполнять запросы на добавление записей в таблицу - простая задача для WebSQL. Рассмотрим пример:<br> 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 (?, ?, ?)", ); }); <br> Первый знак вопроса экранирует параметр <i>food_name </i>, второй - <i>amount_of_calories </i>, а третий - <i>serving_size </i>. Этот код добавляет запись в таблицу <i>cal_list </i> со значениями: <i>pizza </i>, <i>320 </i> и <i>one slice </i> соответствующие столбцы.<br> Выполним другой запрос - на получение данных:<br> var min_cal_amount = 300; ... t.executeSql("SELECT * FROM cal_list WHERE calories > ?", ); <br> Этот код выполнит запрос на выборку всех строк со значением <i>calories </i> больше 300: знак вопроса экранирует переменную <i>min_cal_amount </i>.<h5>Обработка результатов запроса</h5> Ну, вот, мы создали базу данных с таблицами, в которые записали данные, теперь мы хотим сделать запрос и вывести полученные результаты. Обычно, мы получаем кучу результатов для одного SQL-запроса и нам нужно как-то обработать эти результаты, чтобы вывести их в виде таблицы или каком-то другом структурированном виде на странице. Третий параметр функции executeSQL() определяет успешность выполнения запроса. Ниже приведён пример обработки результатов:<br> 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 +="<li>"+food+" has "+amount_of_calories+" KCAL worth of calories.</li>"; } }, function(t,e) {alert(e.message);}) }); <br> Сначала мы определяем количество элементов в результате запроса через <i>r.rows.length </i> и пробегаемся от 0 до этого значения. Каждый элемент доступен по <i>r.rows.item(i) </i>, где i - номер строки. Названия столбцов можно получить так же. Для получения получения значения столбца <i>food </i> используем <i>r.rows.item(i).food </i> и так далее для других столбцов.<h1>Используем всё и сразу</h1> Не исключено, что вам захочется использовать Web Storage, Application Cache и WebSQL вместе. Это возможно, всё зависит от задач, которые нужно решить. Например, если вы хотите хранить всего лишь некоторые пользовательские настройки, будет излишеством использовать WebSQL. Для подобных целей лучше подойдёт Web Storage.<br> Однако, если у вас большой объём данных, и нужно их как-то обрабатывать, то логичнее было бы использовать WebSQL.<br> Посетите страницу с примером про калории, на которой используются вместе все три технологии : база данных хранится в Web Storage, так что вы сможете искать даже если закроете или перезагрузите страницу, AppCache и WebSQL используются для предоставления возможности работать в автономном режиме.<br><h1>Подождите… разве спецификации WebSQL утверждены?</h1> Ещё не окончательно. Но вы уже можете применять эту технологию на приведённом списке браузеров и устройств. Чего нельзя сказать о IndexedDB, у которой нет такой кросс-платформенной поддержки. Осталось только дождаться утверждения спецификации, что и произойдёт в скором времени.<br> Важно также отметить, что некоторые настольные версии браузеров, такие как Firefox и Internet Explorer, не будут поддерживать WebSQL, они будут работать с IndexedDB. В этом случае, первое, где можно применить WebSQL - автономное хранилище данных для смартфонов: поддерживаются браузеры Opera Mobile 11, а также браузеры на движке WebKit для платфом Android и iOS.<br> Хорошая новость о WebSQL заключается в том, что он предлагает удобный инструмент для создания автономной базы данных в браузере. Он лёгок в изучении и применении и позволяет быстро разработать автономное веб-приложение, которое будет сразу работать в нескольких браузерах.<h1>Заключение</h1> Веб-приложения теперь получили возможность работать в полностью автономном режиме, используя такие технологии, как Application Cache, Web Storage и WebSQL базы данных. Application Cache нам нужен для кэширования файлов, чтоб исползовать их в автономном режиме; Web Storage - для хранения небольших объёмов информации, ну а WebSQL будет удобным инструментом для работы с большими объёмами данных. Разработчики в зависимости от потребностей могут использовать различное сочетание этих технологий, для создания автономных приложений.<p>Технология перспективная. И, как обычно, будут гонки… WebSQL и IndexedDB, упоминания о которой уже Добавить метки</p> <p>Облачные хранилища уже давно не новшество. Практически каждая известная и солидная корпорация включает поддержку облачных хранилищ для своих продуктов. ASUS не стала исключением и предлагает клиентам воспользоваться «облаком». Это можно сделать, несколькими способами и утилита Webstorage - одно из решений. Что это за программа и какие возможности получает пользователь, установив ее на ПК, оговорю в рамках данной публикации.</p><h2>О программе</h2><p>Это облачное хранилище, представленное компанией ASUS для всех популярных операционных систем. Сервисом может воспользоваться любой желающий.</p><h3>Тарифный план</h3><p>В бесплатный тарифный план входят:</p><ol><li>5 Гб дискового пространства.</li><li>Лимит на загрузку одного файла 500 Мб.</li><li>Резервное копирование на 1 ПК.</li> </ol><p>Конечно, 5 Гб по сегодняшним меркам это мало, но проведя аналогию с другими популярными облачными хранилищами - это приемлемый показатель. На сегодняшний день:</p><ol><li>После OneDrive - 5 Гб.</li><li>DropBox - 2 Гб.</li><li>Google Drive - 15 Гб.</li><li>Облако Mail.ru - 15 Гб (возможны акции по увеличению дискового пространства).</li> </ol><p>Платный тарифный план кардинально меняет обстановку.</p><table><tbody><tr><td><b>Дисковое пространство </b> </td><td style="background-color: #dbffe2;">200 Гб </td><td style="background-color: #e4f0fe;">2 Тб </td><td style="background-color: #b5feff;">5 ТБ </td> </tr><tr><td><b>Цена, USD </b> </td><td style="background-color: #dbffe2;">29,99 </td><td style="background-color: #e4f0fe;">99,99 </td><td style="background-color: #b5feff;">419,99 </td> </tr><tr><td><b>Лимит загрузки файла </b> </td><td style="background-color: #dbffe2;">10 Гб </td><td style="background-color: #e4f0fe;">10 Гб </td><td style="background-color: #b5feff;">10 Гб </td> </tr><tr><td><b>Резервное копирование </b> </td><td style="background-color: #dbffe2;">на одном ПК </td><td style="background-color: #e4f0fe;">на 2-х ПК </td><td style="background-color: #b5feff;">на 2-х ПК </td> </tr><tr><td><b>Журнал версий </b> </td><td style="background-color: #dbffe2;">за 30 дней </td><td style="background-color: #e4f0fe;">за 30 дней </td><td style="background-color: #b5feff;">за 30 дней </td> </tr><tr><td><b>Обратная связь </b> </td><td style="background-color: #dbffe2;">да </td><td style="background-color: #e4f0fe;">да </td><td style="background-color: #b5feff;">да </td> </tr></tbody></table><h3>Возможности</h3><p>Облако наделено такими функциями:</p><table style="background-color: #d4ffe4;"><tbody><tr><td style="text-align: center;" colspan="2"><b>Доступ к файлам </b> </td> </tr><tr><td>Подключение </td><td>Облако работает с 7-ю ОС и 4-мя популярными браузерами, поэтому доступно практически с любого устройства с выходом в интернет. </td> </tr><tr><td>Интерфейс </td><td>Простой и понятный интерфейс позволяет управлять и следить за информацией. </td> </tr><tr><td>Автосинхронизация фото и видео </td><td>Настройка функции автоматической синхронизации фото и видео, сделанные камерой. </td> </tr><tr><td>Резервирование </td><td>Возможно сделать резервное копирование данных на компьютере. Восстановление данных делается нажатием одной кнопки. </td> </tr><tr><td>Поиск </td><td>Поиск позволяет находить нужные данные, использовав ключевое слово. </td> </tr><tr><td style="text-align: center;" colspan="2"><b>Передача файлов </b> </td> </tr><tr><td>Ссылки </td><td>Можно создать ссылку для любых данных на облаке и поделится ею с семьей и друзьями. </td> </tr><tr><td>Защита рассылки </td><td>Защитить рассылку файлов от третьих лиц помогут пароль и дата окончания действия. </td> </tr><tr><td>Учетная запись </td><td>Можно использовать единый профиль для организации общего и домашнего облака </td> </tr><tr><td style="text-align: center;" colspan="2"><b>Безопасность </b> </td> </tr><tr><td>Двухфакторная аутентификация </td><td>Функция генерирует каждые 30 секунд динамический пароль (OTP) для обеспечения безопасности. </td> </tr><tr><td>Журнал входа в систему </td><td>Ведется учет входа в облако, а именно время и IP. </td> </tr><tr><td>Проверка на вирусы </td><td>Файлы, загружающиеся на облако, проходят проверку на вирусы онлайн сканером. Если антивирус обнаружит вредоносное ПО, то автоматом отправляет его в карантин. </td> </tr></tbody></table><p>Для владельцев устройств ASUS, с предустановленным WebStorage, предоставлено больше возможностей и льгот .</p><h2>Работа с приложением</h2><p>Для того, чтобы начать пользоваться WebStorage, необходимо скачать соответствующее приложение.</p><h3>Для рабочего стола</h3><p>Чтобы воспользоваться программой для рабочего стола, скачайте с официального сайта установщик:</p><br><img src='https://i2.wp.com/geekon.media/wp-content/uploads/2016/08/ustanovshic-webstorage.jpg' width="100%" loading=lazy><p>Для того, чтобы синхронизировать файл с WebStorage, переместите его в папку MySyncFolder самостоятельно или через соответствующую функцию в контекстном меню.</p><p><img src='https://i1.wp.com/geekon.media/wp-content/uploads/2016/08/kopirovaniye-v-papky.jpg' width="100%" loading=lazy></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <div class="evc-social-likes" data-url="https://pskovgraf.ru/asus-webstorage-chto-eto-za-programma-i-naskolko-celesoobrazno-ispolzovanie.html" data-title="ASUS Webstorage: что это за программа и насколько целесообразно использование этого сервиса? ASUS Webstorage: назначение и возможности программы Что такое web storage" data-media="https://i2.wp.com/it-tehnik.ru/wp-content/uploads/1-asuswebstorage.jpg"> <div class="social-likes "> <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div> <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div> </div> <span class="thecategory"><i class="icon-globe"></i> <a href="/category/pc-chips/" rel="category tag">Фишки с ПК</a></span> </div> </article> <div class="post-tags"></div> <div class="related-posts"> <h4>Вам также может понравиться</h4> <article id="post-7026" class="latestpost post-7026 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="/kak-prokachat-level-v-stime-uroven-v-steam-razbiraemsya-dlya-chego-on-nuzhen.html" title="Уровень в Steam — разбираемся, для чего он нужен и как его повысить" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/a978f61a72bcf3445771c56beb770c53.jpg" alt="Уровень в Steam — разбираемся, для чего он нужен и как его повысить" / loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="/kak-prokachat-level-v-stime-uroven-v-steam-razbiraemsya-dlya-chego-on-nuzhen.html" rel="bookmark">Уровень в Steam — разбираемся, для чего он нужен и как его повысить</a></h1> </header> </article> <article id="post-7022" class="latestpost post-7022 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="/nachalnaya-shkola-mobilnoi-fotografii-sovety-po-mobilnoi.html" title="Советы по мобильной фотографии от известных фотографов Основы мобильной фотографии для начинающих" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/053c9d6298ac56900d2ae2be50f5cb7c.jpg" alt="Советы по мобильной фотографии от известных фотографов Основы мобильной фотографии для начинающих" / loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="/nachalnaya-shkola-mobilnoi-fotografii-sovety-po-mobilnoi.html" rel="bookmark">Советы по мобильной фотографии от известных фотографов Основы мобильной фотографии для начинающих</a></h1> </header> </article> <article id="post-7017" class="latestpost post-7017 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="/ne-otkryvaetsya-follaut-4.html" title="Не открывается фоллаут 4" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/f0b3a2bb7d4e3986ae876968c96b1417.jpg" alt="Не открывается фоллаут 4" / loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="/ne-otkryvaetsya-follaut-4.html" rel="bookmark">Не открывается фоллаут 4</a></h1> </header> </article> </div> </main> <div id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype="http://schema.org/WPSideBar"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">Самое популярное</h3> <ul> <li class='li1'><a href='/skolko-stoit-kompyuter-chto-nuzhno-znat-esli-vy-pokupaete-videokartu-s.html' title='Что нужно знать, если вы покупаете видеокарту с рук'>Что нужно знать, если вы покупаете видеокарту с рук</a></li> <li class='li1'><a href='/vzaimnaya-nakrutka-laikov-v-vk-kak-nakrutit-realnye-laiki.html' title='Как накрутить реальные лайки ВК бесплатно (лайки от живых людей)'>Как накрутить реальные лайки ВК бесплатно (лайки от живых людей)</a></li> <li class='li1'><a href='/vord-of-tanks-blic-world-of-tanks-blitz-sekrety-i-sovety-po-igre-pravilno.html' title='World of Tanks Blitz: секреты и советы по игре'>World of Tanks Blitz: секреты и советы по игре</a></li> <li class='li1'><a href='/reshenie-problem-pri-zapuske-warface-regionalnye-servery-v-stroyu-kakoi-region.html' title='Региональные серверы в строю Какой регион включить в варфейсе'>Региональные серверы в строю Какой регион включить в варфейсе</a></li> <li class='li1'><a href='/nevozmozhno-oplatit-na-aliekspress-pochemu-ne-mogu-oplatit-zakaz-na-aliekspress.html' title='Почему не могу оплатить заказ на алиэкспресс картой сбербанка'>Почему не могу оплатить заказ на алиэкспресс картой сбербанка</a></li> <li class='li1'><a href='/dhl-global-mail-kurerskaya-kompaniya-otslezhivanie-global-parcel-service-spring-global-mail-otslezhiva.html' title='Отслеживание Global Parcel Service Spring global mail отслеживание'>Отслеживание Global Parcel Service Spring global mail отслеживание</a></li> <li class='li1'><a href='/kak-ustanovit-vremya-na-prezentacii-demonstraciya-gotovoi-prezentacii-i-slaidov-nastraivaem-vremya-p.html' title='Демонстрация готовой презентации и слайдов'>Демонстрация готовой презентации и слайдов</a></li> <li class='li1'><a href='/chto-vazhno-uchityvat-pri-ozvuchke-prezentacii-zapis-rechi-diktora-v-prezentaciyu.html' title='Запись речи диктора в презентацию PowerPoint Как наложить звук на презентацию в powerpoint'>Запись речи диктора в презентацию PowerPoint Как наложить звук на презентацию в powerpoint</a></li> <li class='li1'><a href='/preimushchestva-i-nedostatki-kompyuternogo-testirovaniya-dostoinstva-i.html' title='Достоинства и недостатки личностных опросников Тестирование как метод исследования плюсы и минусы'>Достоинства и недостатки личностных опросников Тестирование как метод исследования плюсы и минусы</a></li> <li class='li1'><a href='/xiaomi-kak-sdelat-rezervnoe-kopirovanie-kak-sdelat-bekap-na-xiaomi-dlya.html' title='Как сделать бэкап на Xiaomi для создания резервной копии данных'>Как сделать бэкап на Xiaomi для создания резервной копии данных</a></li> </ul> </aside> <aside id="wpforo_widget_recent_topics-2" class="widget widget_wpforo_widget_recent_topics"><div id="wpf-widget-recent-replies" class="wpforo-widget-wrap"><h3 class="widget-title">Новые сообщения</h3><div class="wpforo-widget-content"><ul> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/ccc8b019d51022b4139fd1c3aa3dcddc.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/igry-tipa-rust-igry-pohozhie-na-rust-igry-pohozhie-na-rust-pk.html">Игры похожие на Rust Игры похожие на rust пк</a></p> <p class="postuser">2024-05-01 11:44:58</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/0f42ea2fd6e5cc28a68e8bb67ca8c90f.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/sberbank-vsegda-ryadom-logotip-novyi-logotip-sberbanka.html">Новый логотип «Сбербанка</a></p> <p class="postuser">2024-04-28 11:57:25</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/294e4551557f73fbf514eac30e17b2f1.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/razdelitel-dlya-papok-svoimi-rukami-organizui-eto-proekt-organizacii-receptov.html">Разделитель для папок своими руками</a></p> <p class="postuser">2024-04-27 12:20:23</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/4d610781044b3ea9ba15365557162fb3.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/ergonomichnoe-rabochee-mesto-za-kompyuterom-kak-sdelat-vash.html">Как сделать ваш компьютер эргономичным: правила компьютерной эргономики, советы</a></p> <p class="postuser">2024-04-27 12:20:23</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/1c42c826b72d3fe16933e11d121478cf.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/igry-pohozhie-na-mount-and-blade-luchshie-igry-pohozhie-na-mount-and-blade-igry-pohozhie-na.html">Лучшие игры, похожие на Mount and Blade Игры похожие на варбанд</a></p> <p class="postuser">2024-04-26 12:25:22</p> </div> <div class="wpf-clear"></div> </div> </li> </ul></div></div></aside><aside id="categories-2" class="widget widget_categories"><h3 class="widget-title">Рубрики</h3> <ul> <li class="cat-item cat-item-84"><a href="/category/pc-software/">Программы для ПК</a> </li> <li class="cat-item cat-item-84"><a href="/category/for-windows-7/">Для Windows 7</a> </li> <li class="cat-item cat-item-84"><a href="/category/games-and-programs/">Игры и программы</a> </li> <li class="cat-item cat-item-84"><a href="/category/codecs-and-players/">Кодеки и плееры</a> </li> <li class="cat-item cat-item-84"><a href="/category/archivers/">Архиваторы</a> </li> <li class="cat-item cat-item-84"><a href="/category/audio-editors/">Аудио редакторы</a> </li> <li class="cat-item cat-item-84"><a href="/category/browsers/">Браузеры</a> </li> <li class="cat-item cat-item-84"><a href="/category/programs/">Программы </a> </li> <li class="cat-item cat-item-84"><a href="/category/hacking/">Взлом</a> </li> <li class="cat-item cat-item-84"><a href="/category/downloads/">Закачки</a> </li> </ul> </aside><aside id="dwqa-latest-question-2" class="widget widget_categories"><h3 class="widget-title">Новые статьи</h3><ul> <li class="cat-item"><a href="/otstante-ot-menya-ya-hlebushek-samye-neobychnye-igry-na-pk.html">Необычные игры - скачать мини игры Необычные игры для пк</a></li> <li class="cat-item"><a href="/oficialnyi-f-a-q-igry-star-wars-the-old-republic---sistemnye-trebovaniya-rasy-i.html">Официальный F.A.Q. игры. Star Wars: The Old Republic - Системные требования Расы и классы</a></li> <li class="cat-item"><a href="/kak-prokachat-level-v-stime-uroven-v-steam-razbiraemsya-dlya-chego-on-nuzhen.html">Уровень в Steam — разбираемся, для чего он нужен и как его повысить</a></li> <li class="cat-item"><a href="/nachalnaya-shkola-mobilnoi-fotografii-sovety-po-mobilnoi.html">Советы по мобильной фотографии от известных фотографов Основы мобильной фотографии для начинающих</a></li> <li class="cat-item"><a href="/ne-otkryvaetsya-follaut-4.html">Не открывается фоллаут 4</a></li> <li class="cat-item"><a href="/skolko-stoit-kompyuter-chto-nuzhno-znat-esli-vy-pokupaete-videokartu-s.html">Что нужно знать, если вы покупаете видеокарту с рук</a></li> <li class="cat-item"><a href="/vzaimnaya-nakrutka-laikov-v-vk-kak-nakrutit-realnye-laiki.html">Как накрутить реальные лайки ВК бесплатно (лайки от живых людей)</a></li> <li class="cat-item"><a href="/vord-of-tanks-blic-world-of-tanks-blitz-sekrety-i-sovety-po-igre-pravilno.html">World of Tanks Blitz: секреты и советы по игре</a></li> <li class="cat-item"><a href="/reshenie-problem-pri-zapuske-warface-regionalnye-servery-v-stroyu-kakoi-region.html">Региональные серверы в строю Какой регион включить в варфейсе</a></li> <li class="cat-item"><a href="/nevozmozhno-oplatit-na-aliekspress-pochemu-ne-mogu-oplatit-zakaz-na-aliekspress.html">Почему не могу оплатить заказ на алиэкспресс картой сбербанка</a></li> </ul></aside></div> </div> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info container"> <div class="copyrights"> <span class="sep"> </span> pskovgraf.ru - Программы для ПК. Браузеры. Кодеки и программы. Windows. Игры </div> <a href="#blog" class="toplink" ><i class="icon-angle-up"></i></a> <nav id="navigation" class="footer-navigation" role="navigation"> <div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> <li class="menu-item type-post_type object-page "><a href="/feedback.html">Контакты</a></li> </ul></div> </nav> </div> </footer> </div> <div id="vk_api_transport"></div> <script type="text/javascript"> jQuery(document).ready(function ($) { if ($('.social-likes')) { $('.social-likes').each(function () { var p = $(this).parent(); if (p.data('url')) { $(this).data({ 'url': p.data('url'), 'title': p.data('title') } ); } if ($(this).find('.pinterest').length) { if (p.data('media')) { $($(this).find('.pinterest')[0]).data({ 'media': p.data('media') } ); } else $($(this).find('.pinterest')[0]).remove(); } } ); $('.social-likes').socialLikes({ zeroes: 0 } ); } } ); </script> <script type='text/javascript' src='/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript' src='/wp-content/plugins/easy-vkontakte-connect/js/evc-share.js'></script> <script type='text/javascript' src='/wp-content/plugins/easy-vkontakte-connect/js/social-likes.min.js?ver=3.0.4'></script> <script type='text/javascript' src='/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='/wp-content/plugins/wp-review/assets/js/main.js?ver=4.0.6'></script> <script type='text/javascript' src='/wp-content/themes/sociallyviral/js/customscripts.js?ver=20120212'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.6.9'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.6.9'></script> <script>setTimeout( function(){ jQuery.post('/wp-content/plugins/kama-postviews/ajax-request.php',{ meta_id:'1438', view_type:'post_view', relpath:'' } ,function(result){ jQuery('.ajax_views').html(result); } );} , 2000);</script> <script>function lc_get_cookie(name) { var c = document.cookie;if (c.indexOf(name) != -1) { var x = c.indexOf(name)+name.length+1;var y = c.indexOf(";",x);if (y < 0) y = c.length;return decodeURIComponent(c.substring(x,y));} else return "";} if ((d = document.getElementById("commentform")) != null) { e = d.elements;var z = lc_get_cookie("comment_author_email_27b5a291828a105bf783f92a6d070718");if (z != "") e["email"].value = z;z = lc_get_cookie("comment_author_27b5a291828a105bf783f92a6d070718");if (z != "") e["author"].value = z.replace(/\+/g, " ");z = lc_get_cookie("comment_author_url_27b5a291828a105bf783f92a6d070718");if (z != "") e["url"].value = z;} </script></body></html>