НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 8: Работа с данными в памяти мобильного устройства

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать программу

Добавьте в папку www/js проекта два (пока пустых) JS файла, назовите их localStorage.js и sessionStorage.js. Первый будет содержать код для работы с localStorage, второй - для работы с sessionStorage:

увеличить изображение
Для первых двух добавленных страниц будет необходим лишь localStorage.js. Содержимое JS-файла localStorage.js:
```
function resolveForm() {
    this.countVal = "";
    this.topCount = document.checkRadio.length;

    for (var count = 0; count < this.topCount; count++)
        if (document.checkRadio.elements[count].checked) {
            this.countVal = document.checkRadio.elements[count].value;
            var k = localStorage.getItem(this.countVal);
            localStorage.setItem(this.countVal, k)
        }

    document.checkRadio.outNow.value = this.countVal;

}

function show() {
    var databox = document.getElementById('databox');
    databox.innerHTML = '<div><input type=button id="button" 
name=delAll value="Очистить" onClick="removeAll()"></button></div>';
    databox.innerHTML += '<div><input type=button id="button" 
name=del value="Удалить товары" onClick="remove()"></button></div>';
    for (var f = 0; f < localStorage.length; f++) {
        var keyword = localStorage.key(f);       
        databox.innerHTML += '<div><br><input type="checkbox" id="checkbox"  
value="' + keyword + '">' + keyword + '</button></div>';

    }
}

function remove() {
    this.countVal = "";
    this.topCount = document.checkRadio.length;

    for (var count = 0; count < this.topCount; count++)
        if (document.checkRadio.elements[count].checked) {
            this.countVal = document.checkRadio.elements[count].value;
            localStorage.removeItem(this.countVal);
        }
    show();
}
function removeAll() {
    if (confirm('Вы уверены?')) {
        localStorage.clear(); show();
    }
}
```
Далее приводится назначение функций из файла localStorage.js.
- resolveForm() - сохраняет в localStorage данные, выбранные с помощью checkBox; назначение входящих в нее компонент:
  - this.countVal = "" - пустая строка;
  - this.topCount = document.checkRadio.length - количество флажков checkBox на странице;
  - for (var count = 0; count < this.topCount; count++) - цикл просмотра флажков checkBox;
  - if (document.checkRadio.elements[count].checked) - анализ выбора checkBox;
  - localStorage.setItem(this.countVal, k) - сохранение выбранных значений в localStorage;
  - this.countVal - ключ сохраняемых данных;
  - document.checkRadio.outNow.value = this.countVal - сбрасывание всех флажков checkBox.
- show() - выводит содержимое localStorage; назначение входящих в нее компонент:
  - var databox = document.getElementById('databox') - данные будут выводится в объекте databox с именем databox.
  - databox.innerHTML = '<div><input type=button name=delAll value="Очистить" onClick="removeAll()"></button></div>' - вставка кнопки "Очистить" со ссылкой на функцию removeAll;
  - databox.innerHTML += '<div><input type=button name=del value="Удалить товары" onClick="remove()"></button></div>' - вставка кнопки "Удалить товары" со ссылкой на функцию remove().
  - var keyword = localStorage.key(f) - ключ данных;
  - databox.innerHTML += '<div><br><input type=checkbox value="' + keyword + '">'+keyword+'</button></div>' - вывод элементов из localStorage с добавлением к ним флажков checkBox.
- remove() - удаляет указанный элемент по ключу this.countVal.

Наполните кодом разметки страницу Product.html из папки www. Код страницы:

<html lang="ru">
<head>
<script type="text/javascript" src="js/LocalStorage.js"> </script>
 <link rel="stylesheet" type="text/css" href="css/index.css">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List</title>
</head>
<body>
<article>
<header>
<h3> <img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a> 
<img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> Заказы</a><br></h3>
<h1>  Список товаров</h1>
</header>
<div id="dataEntry">
<div id="lang">
<section>
<h2>Notebook</h2>
<form name=checkRadio>

<label>
<input type= "checkbox" id="checkbox" name=Ap15 value="Apple MacBook Pro 15, 
Core i7(2,8 MGh), NVIDIA GeForce GT 650M,..." >
 Apple MacBook Pro 15, Core i7(2,8 MGh), NVIDIA GeForce GT 650M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=Le value="Lenovo G780, 
Core i5(2,3 MGh), NVIDIA GeForce GT 635M,...">
 Lenovo G780, Core i5(2,3 MGh), NVIDIA GeForce GT 635M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=AV value="ASUS VivoBook S400CA, 
Core i7(1,9 MGh), Intel HD Graphics 4000,...">
 ASUS VivoBook S400CA, Core i7(1,9 MGh), Intel HD Graphics 4000,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=HP value="HP PAVILION 15-n054, 
Core i3(1,8 MGh), AMD Radeon HD 8670M,...">
 HP PAVILION 15-n054, Core i3(1,8 MGh), AMD Radeon HD 8670M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=Ap13 value="Apple MacBook Pro 13, 
Core i7(2,9 Mgh), Intel HD Graphics 4000,...">
 Apple MacBook Pro 13, Core i7(2,9 Mgh), Intel HD Graphics 4000,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=AN value="ASUS N550JV, 
Core i7(2,4 MGh), NVIDIA GeForce GT 750M,...">
 ASUS N550JV, Core i7(2,4 MGh), NVIDIA GeForce GT 750M,...</label>
    <hr color="blue">
</form>
</section>
</div>
</div>

<section>
</section>

<p>
<input type= "button" id="button" name=getEm value="Поместить в корзину" onClick="resolveForm()">

</article>
</body>
</html>

Пояснения к разметке:

<img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a> <img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> - переход на другие страницы
<form name=checkRadio> - Задание формы откуда будет считываться количество checkBox
<input type=button name=getEm value="Поместить в корзину" onClick="resolveForm()"> - Помещение в localStorage выбранных элементов.

Результат запуска страницы Product.html на мобильном устройстве Windows Phone: