Статьи

HTML5 Local Storage — Создание примера приложения в Tiggr Mobile Apps Builder

Март 31, 2019

Локальное хранилище HTML5, несомненно, является одной из самых интересных и обсуждаемых функций в стеке технологий HTML5. Локальное хранилище является частью спецификации Web Storage и поддерживается всеми современными браузерами (destkop и mobile). Хотя локальное хранилище (или веб-хранилище) звучит довольно сложно, функциональность очень проста в использовании. Вы в основном получаете карту как хранилище внутри браузера (доступно для всех окон браузера). Вы можете вставить, удалить или прочитать пары ключ / значение. Вот и все. Данные, хранящиеся в локальном хранилище (localStorage), будут там, когда вы закроете и откроете браузер. Существует также хранилище сессий (sessionStorage). Как следует из названия, оно будет доступно только до тех пор, пока открыто окно браузера, и будет очищено при закрытии окна браузера.

Единственное, что нужно знать, это то, что данные, сохраненные на странице, доступны только для страниц из того же домена. Другими словами, страница, загруженная с abc.com, не имеет доступа к данным, сохраненным страницей с домена xyz.com.

Мы собираемся создать приложение, похожее на скриншот ниже. На самом деле, вы можете попробовать приложение здесь (щелкните изображение или отсканируйте QR-код). Попробуйте и на своем мобильном устройстве.

Для создания приложения я использовал Tiggr Mobile Apps Builder. Если вам интересно, почему Tiggr? Ну, потому что это невероятно просто и быстро создать проект и создать приложение. Если у вас еще нет учетной записи, быстро зарегистрируйтесь здесь .

Сначала создайте пользовательский интерфейс, перетаскивая компоненты jQuery Mobile из палитры на телефон. В любой момент вы можете нажать кнопку «Тест», чтобы попробовать приложение в браузере или мобильном браузере.

Вы можете использовать Tiggr для создания реальных мобильных приложений без написания JavaScript. Но для более сложных случаев (таких как наш) вы можете легко написать любой собственный JavaScript. Вы даже можете импортировать сторонние библиотеки JavaScript. В нашем случае мы собираемся создать новый файл JavaScript (называемый активом) со следующим содержимым:

 

// save item
function save(item) {
  var size = localStorage.length + 1;
  localStorage.setItem('key' + size, item);
}
// get storage content
function storage(){
   var output='';
   for (i=0; i <= localStorage.length - 1; i++)  {  
      key = localStorage.key(i);  
      val = localStorage.getItem(key);  
      if (i == 0) {
         output = val;
      }
      else {
         output = output + '\n' +val;
      }
   }
   return output;
}
// clear storage
function clear () {
   localStorage.clear();
}

 

Существует три функции: одна для сохранения нового элемента ( save () ), одна для получения текущего хранилища ( storage () ) и одна для очистки содержимого ( clear () ). API локального хранилища очень прост. Например, чтобы сохранить элемент:

 

// save an item
localStorage.setItem('key', 'item');

 

затем, чтобы получить значение из хранилища:

 

// retrieve an item
localStorage.getItem('key');

 

Вот как выглядит весь файл в редакторе JavaScript Tiggr:

Последний шаг — активировать JavaScript при нажатии кнопок. Мы также хотим загрузить содержимое хранилища при первой загрузке экрана. Давайте сначала поработаем над кнопками. Для вызова JavaScript на кнопку мыши, мы сначала добавить щелчок HTML события кнопки:

Затем мы добавляем действие «Выполнить пользовательское JavaScript», нажав кнопку « +» :

Нажмите на действие, чтобы ввести код JavaScript. Код кнопки «Сохранить в локальном хранилище» выглядит следующим образом:

 

var item =$('[dsid="input"]').val();
save(item);
var output='';
output = storage();
$('[dsid="storageContent"]').text(output);

 

Сначала мы находим компонент ввода с помощью jQuery (это будет проще сделать, как только мы представим Tiggr JavaScript API , работа над ним). Сохраните значение из элемента ввода, перезагрузите содержимое хранилища, чтобы мы могли отобразить его внутри текстовой области.

Кнопка Очистить локальное хранилище выглядит так:

 

clear();
$('[dsid="storageContent"]').text('');
alert('Local storage cleared.');

 

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

 

var output='';
output = storage();
$('[dsid="storageContent"]').text(output);

 

Попробуйте сами (это легко и весело!) И попробуйте готовое приложение здесь .

32
Share: