Зачастую, при разработке многих приложений возникает необходимость в сохранении данных, которые ввёл пользователь. Для хранения небольших  объемов данных в системе KaiOS предусмотрено удобное и простое решение. Рассмотрим его по подробнее.

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

Наш файл index.html будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<title>Storage</title>
<script src="/app.js" defer></script> 
<link rel="stylesheet" type="text/css" href="/css.css">
</head>
<body>
Storage<br>
<input type="text"  tabIndex=1 class="items" id="txt">
<footer class="softkey"> 
<table class="ctable"><tr>
<th class="cth"><div id="softkey-left" class="othkey">Save</div></th>
<th class="cth"><div id="softkey-center" class="okkey"></div></th>
<th class="cth"><div id="softkey-right" class="othkey">Open</div></th>
</tr></table>
</footer>
</body>
</html>

Пройдёмся немного по коду.

<script src="/app.js" defer></script>

Подключаем внешний java script для перехода по элементам программы с клавиатуры телефона и возможности работы с хранилищем (код рассмотрим ниже).

<link rel="stylesheet" type="text/css" href="/css.css">

Внешний файл для правильного расположения объектов на экране и подсвечивания фокуса элементов.

<input type="text" tabIndex=1 class="items" id="txt">

Поле для ввода текста. tabIndex необходим для перехода фокуса; class для определения типа элемента, к которому возможно применение фокуса; id для взаимодействия с данными, которые введены в поле.

<footer class="softkey"> 
<table class="ctable"><tr>
<th class="cth"><div id="softkey-left" class="othkey">Save</div></th>
<th class="cth"><div id="softkey-center" class="okkey"></div></th>
<th class="cth"><div id="softkey-right" class="othkey">Open</div></th>
</tr></table>
</footer>

Футер (подписи для софт клавиш) - используем только правую и левую кнопку, присвоили им названия Save и Open. Подробнее про взаимодействие с клавиатурой читайте в материале "Навигация и софт клавиши в приложениях".

Файл css.css будет иметь следующий вид:

footer {
    background: gray;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

.okkey {
  font-family: 'Open Sans Bold';
  font-size: 16px;
}

.othkey {
  font-family: 'Open Sans Regular';
  font-size: 14px;
}

.ctable {
  width: 100%;
}

.cth {
  width: 33%;
}

.items:focus {
  background: #FFFF00; 
}

В нем мы указываем, что цвет элемента на который перейдёт фокус будет жёлтым:

.items:focus {
  background: #FFFF00; 
}

А остальная часть кода относится к отображению футера, и была подробна рассмотрена в предыдущем материале.

Далее возьмём наш файл app.js и немного его модифицируем:

window.addEventListener("load", function() {
  document.querySelector(".items").focus();  
});

function handleKeydown(e) {
  switch(e.key) {
    case 'ArrowUp':
      nav(-1);
      break;
    case 'ArrowDown':
      nav(1);
      break;
    case 'ArrowRight':
      nav(1);
      break;
    case 'ArrowLeft': 
      nav(-1);
      break;
    case 'SoftLeft':
      softkeyCallback.left();
      break;
    case 'SoftRight':
      softkeyCallback.right();
      break;
    case 'Enter':
      softkeyCallback.center();
      break;

  }
};

function nav (move) {
  	
  var currentIndex = document.activeElement.tabIndex;
  var items = document.querySelectorAll('.items');
  var next = currentIndex + move;
  if (next>items.length-1) {next--;} else if (next<0) {next++;}
  var targetElement = items[next];
  targetElement.focus();
};

const softkeyCallback = {
    left: function() { 
      localStorage.setItem('storage1', document.getElementById("txt").value);
     },
  
    center: function() { 
      var chk = document.activeElement;
      if (chk.type == "checkbox" || chk.type == "radio") {
      if (chk.checked == false) {chk.checked = true;} else {chk.checked = false;}}
      },
  
    right: function() { 
      document.getElementById("txt").value=localStorage.getItem('storage1');
     }
};

document.activeElement.addEventListener('keydown', handleKeydown);

Данный код мы уже рассматривали, коснёмся изменений.

На левую функциональную клавишу мы назначили следующую функцию:

localStorage.setItem('storage1', document.getElementById("txt").value);

Для сохранения текста, введённого в текстовое поле с id="txt" мы используем функцию localStorage. Она позволяет сохранить любое значение в заданное нами хранилище, в нашем случае в storage1. В простейшем случае запись в память выглядит так:

localStorage.setItem('storageName', 'Value');

В этом примере, мы сохраним текстовую строку Value в хранилище с именем storageName. Для того, чтобы удалить данные из хранилища, используется функция:

localStorage.removeItem('storageName');

Из хранилища storageName будет удалено сохранённое значение. Количество хранилищ не ограничено. Если вам необходимо очистить все хранилища, используйте функцию:

localStorage.clear();

Особенность функции localStorage в том, что данные сохраняются и после выхода из приложения.

Теперь рассмотрим получение данных из хранилища. На правую софт клавишу мы назначили следующую функцию:

document.getElementById("txt").value=localStorage.getItem('storage1');

Как видно из кода, мы помещаем значение, находящееся в хранилище storage1 в текстовое поле с id="txt". В простейшем виде функция получения данных из хранилища выглядит так:

var www = localStorage.getItem('storageName');

В этом выражении мы присваиваем переменной www значение, находящееся в хранилище с именем storageName.

Если теперь вы запустите программу, то сможете убедиться, что при нажатии левой софт клавиши Save происходит сохранение введённого текста, а при нажатии правой софт клавиши Load - вывод в текстовое поле ранее сохранённого текста. Причем и при выходе из приложения данные хранилища очищены не будут.

Функция сохранения данных в KaiOS

Если же вам нет необходимости в длительном хранении данных, можете воспользоваться другой функцией, полностью аналогичной вышеописанной, но с одним отличием - все данные хранилищ очищаются при выходе из приложения. Это функция sessionStorage.

Её синтаксис полностью аналогичен:

// Сохранение данных
sessionStorage.setItem('key', 'value');

// Считавание данных
let data = sessionStorage.getItem('key');

// Очистка хранилища с именем key
sessionStorage.removeItem('key');

// Очистка всех хранилищ
sessionStorage.clear();

Добавить комментарий

Защитный код
Обновить