Зачастую, при разработке многих приложений возникает необходимость в сохранении данных, которые ввёл пользователь. Для хранения небольших объемов данных в системе 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 - вывод в текстовое поле ранее сохранённого текста. Причем и при выходе из приложения данные хранилища очищены не будут.
Если же вам нет необходимости в длительном хранении данных, можете воспользоваться другой функцией, полностью аналогичной вышеописанной, но с одним отличием - все данные хранилищ очищаются при выходе из приложения. Это функция sessionStorage.
Её синтаксис полностью аналогичен:
// Сохранение данных
sessionStorage.setItem('key', 'value');
// Считавание данных
let data = sessionStorage.getItem('key');
// Очистка хранилища с именем key
sessionStorage.removeItem('key');
// Очистка всех хранилищ
sessionStorage.clear();