Разработка гибридных приложений для мобильных устройств под Windows Phone

Работа с данными в памяти мобильного устройства

Разбить на страницы
Показывать лекцию целиком

Ход выполнения:

  • Создайте проект Cordova с произвольным именем, например, Storage.
  • Замените содержимое таблицы стилей файла www/css/index.css (полностью удалите старое содержимое) новыми правилами, содержащими селекторы body, h1, h2, h3, button, checkbox:
    body {
    background-color:#fbf7e4;
    font-family:Verdana, Geneva, sans-serif; 
    margin-left:20px; 
    color:#8e001c;
    }
    h1 {
    background-color:#8E001C;
    color:#e7e8d1;
    font-family:"Arial Black", Gadget, sans-serif;
    text-align:center;
    }
    h2 {
    background-color:black;
    color:white;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-left:5px;
    }
    h3
     {
    background-color:black;
    color:white;
    font-family:"Trebuchet MS", Calibri, Helvetica, sans-serif;
    text-align:right;
    }
    #button {
        height: 50px;
        width: 150px;
        
    }
    #checkbox {
        height: 50px;
        width: 50px;
    }
  • В папку img добавьте три небольших изображения, которые потребуются для оформления создаваемой для заказа товаров страницы:

    Новое содержимое обозревателя решений с добавленными изображениями:

  • Замените содержимое главного файла проекта - index.html (полностью удалите старое содержимое) новым кодом разметки, содержащим элемент <style> для связи с созданной таблицей стилей index.css, а также теги <body>, <h1>, <h2> и <h3>, соответствующие правилам таблицы стилей. Новый код разметки страницы index.html:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
       minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>Shop</title>
        </head>
        <body>
            <h1> Простейший магазин</h1>
            <h2>
            <img src="img/tab.jpg" width="20" height="20"> <a href="Product.html">  Список товаров</a><br>
            <img src="img/tel.jpg" width="20" height="20"><a href="Basket.html"> Корзина</a><br>
           <img src="img/za.jpg" width="20" height="20"> <a href="Like.html"> Заказы</a><br>
            </h2>
    
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
        </body>
    </html>

    Приведенная разметка содержит обращения к трем, пока отсутствующим, страницам: Product.html, Basket.html и Like.html. Ее можно протестировать пока без этих страниц. Скриншот запуска приложения на мобильном устройстве Windows Phone:

  • Добавьте в папку www три новые страницы, соответствующие гиперссылкам "Список товаров", "Корзина", "Заказы":
  • Product.html - будет выдавать список товаров и давать пользователю возможность выбрать товары для корзины, используя флажки; сохранит данные указанных пользователем товаров из корзины в постоянном хранилище localStorage.
  • Basket.html - загрузит (прочитает) сохраненные в localStorage данные об отобранных в корзину товарах и выдаст их список.
  • Like.html - даст пользователю возможность ввести название фирмы - производителя, которой будет отправлен заказ, а также ввести характеристики заказа. Введенные данные будут сохраняться во временном хранилище sessionStorage только на время работы приложения.
  • Добавьте в папку 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:

    После нажатия кнопки наши выбранные результаты поместятся в localStorage:

  • Вставьте следующий код в страницу работы с корзиной товаров Basket.html:
    <h3><img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> Заказы</a> 
     <img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a><br></h3>
    <h1> Корзина товаров</h1>
    </header>
    <div id="lang">
    <section>
    <div>
    <p>
    <input type="button" id="button" name=getEm value="Ваша корзина" onClick="show()">
    </p>
    </div>
    </section>
    </div>
    <form name=checkRadio>
        <h2>Ваши покупки:</h2>
        <section id = "databox"> </section> <br />
    </form>
    </article>
    </body>
    </html>

    Результат запуска страницы Basket.html:

    Результат нажатия кнопки "Ваша корзина":

    Следует отметить, что после нажатия кнопки, в элементе databox отобразилось всё содержимое localStorage.

    Удалим элемент из localStorage. Для этого выберем элемент "Apple MacBook Pro 15, Core i7(2,8 MGh), NVIDIA GeForce GT 650M,.." и нажмём кнопку "Удалить товар". Результат тестирования данной страницы:

    Для очищения localStorage воспользуемся кнопкой "Удалить товары". Результат тестирования:

  • Разработку страницы Like.html начните с наполнения JS-файла sessionStorage.js следующим кодом JavaScript:
    function initiate() {
        var button = document.getElementById('button');
        button.addEventListener('click', newitem, false);
        show();
    }
    function newitem() {
        var keyword = document.getElementById('keyword').value;
        var value = document.getElementById('text').value;
        sessionStorage.setItem(keyword, value);
        show();
        document.getElementById('keyword').value = '';
        document.getElementById('text').value = '';
    }
    function show() {
        var databox = document.getElementById('databox');
        databox.innerHTML ='' ;
        for (var f = 0; f < sessionStorage.length; f++) {
            var keyword = sessionStorage.key(f);
            var value = sessionStorage.getItem(keyword);
            databox.innerHTML += '<div>' + keyword + ' - ' + value + '</div>';
    
        }
    
    }
    
    window.addEventListener('load', initiate, false);

    По содержанию созданный sessionStorage.js подобен localStorage.js.

  • Наполним страницу Like.html следующим кодом разметки:
    <!DOCTYPE  html> 
    <html lang="ru"> 
    <head>
     <title>Like</title> <link rel="stylesheet" href="css/index.css"> 
     <script type="text/javascript" src="js/sessionStorage.js"></script>
    </head> 
    <body>
        <h3> <img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a>  
    <img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a><br></h3>
    <section id="formbox"> 
        <form name="form">
    <p>Фирма производитель:</p>
        <p><input type="text" name="keyword" id="keyword"></p> 
        <p>Характеристики:<br /><input type ="text" name="text" id="text" ></p>
    <p><input type ="button" id ="button" name ="button" value="Отправить"/></p><br />
    </form> 
        <h2>Мои заказы:</h2>
    <section id = "databox"> Мои заказы: </section> <br />
    </section> 
    </body> 
    </html>

    В приведенном коде используются средства работы с временной памятью мобильного устройства из sessionStorage.js.

    Вводимые пользователем данные (фирма, характеристики) сохраняются в sessionStorage и сразу выводятся в поле databox страницы.

    Результаты запуска страницы Like.html:

    Результат нажатия кнопки "Отправить":

  • Страницы:

    Ход выполнения:

  • Создайте проект Cordova с произвольным именем, например, Storage.
  • Замените содержимое таблицы стилей файла www/css/index.css (полностью удалите старое содержимое) новыми правилами, содержащими селекторы body, h1, h2, h3, button, checkbox:
    body {
    background-color:#fbf7e4;
    font-family:Verdana, Geneva, sans-serif; 
    margin-left:20px; 
    color:#8e001c;
    }
    h1 {
    background-color:#8E001C;
    color:#e7e8d1;
    font-family:"Arial Black", Gadget, sans-serif;
    text-align:center;
    }
    h2 {
    background-color:black;
    color:white;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-left:5px;
    }
    h3
     {
    background-color:black;
    color:white;
    font-family:"Trebuchet MS", Calibri, Helvetica, sans-serif;
    text-align:right;
    }
    #button {
        height: 50px;
        width: 150px;
        
    }
    #checkbox {
        height: 50px;
        width: 50px;
    }
  • В папку img добавьте три небольших изображения, которые потребуются для оформления создаваемой для заказа товаров страницы:

    Новое содержимое обозревателя решений с добавленными изображениями:

  • Замените содержимое главного файла проекта - index.html (полностью удалите старое содержимое) новым кодом разметки, содержащим элемент <style> для связи с созданной таблицей стилей index.css, а также теги <body>, <h1>, <h2> и <h3>, соответствующие правилам таблицы стилей. Новый код разметки страницы index.html:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
       minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>Shop</title>
        </head>
        <body>
            <h1> Простейший магазин</h1>
            <h2>
            <img src="img/tab.jpg" width="20" height="20"> <a href="Product.html">  Список товаров</a><br>
            <img src="img/tel.jpg" width="20" height="20"><a href="Basket.html"> Корзина</a><br>
           <img src="img/za.jpg" width="20" height="20"> <a href="Like.html"> Заказы</a><br>
            </h2>
    
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
        </body>
    </html>

    Приведенная разметка содержит обращения к трем, пока отсутствующим, страницам: Product.html, Basket.html и Like.html. Ее можно протестировать пока без этих страниц. Скриншот запуска приложения на мобильном устройстве Windows Phone:

  • Добавьте в папку www три новые страницы, соответствующие гиперссылкам "Список товаров", "Корзина", "Заказы":
  • Product.html - будет выдавать список товаров и давать пользователю возможность выбрать товары для корзины, используя флажки; сохранит данные указанных пользователем товаров из корзины в постоянном хранилище localStorage.
  • Basket.html - загрузит (прочитает) сохраненные в localStorage данные об отобранных в корзину товарах и выдаст их список.
  • Like.html - даст пользователю возможность ввести название фирмы - производителя, которой будет отправлен заказ, а также ввести характеристики заказа. Введенные данные будут сохраняться во временном хранилище sessionStorage только на время работы приложения.
  • Добавьте в папку 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:

    После нажатия кнопки наши выбранные результаты поместятся в localStorage:

  • Вставьте следующий код в страницу работы с корзиной товаров Basket.html:
    <h3><img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> Заказы</a> 
     <img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a><br></h3>
    <h1> Корзина товаров</h1>
    </header>
    <div id="lang">
    <section>
    <div>
    <p>
    <input type="button" id="button" name=getEm value="Ваша корзина" onClick="show()">
    </p>
    </div>
    </section>
    </div>
    <form name=checkRadio>
        <h2>Ваши покупки:</h2>
        <section id = "databox"> </section> <br />
    </form>
    </article>
    </body>
    </html>

    Результат запуска страницы Basket.html:

    Результат нажатия кнопки "Ваша корзина":

    Следует отметить, что после нажатия кнопки, в элементе databox отобразилось всё содержимое localStorage.

    Удалим элемент из localStorage. Для этого выберем элемент "Apple MacBook Pro 15, Core i7(2,8 MGh), NVIDIA GeForce GT 650M,.." и нажмём кнопку "Удалить товар". Результат тестирования данной страницы:

    Для очищения localStorage воспользуемся кнопкой "Удалить товары". Результат тестирования:

  • Разработку страницы Like.html начните с наполнения JS-файла sessionStorage.js следующим кодом JavaScript:
    function initiate() {
        var button = document.getElementById('button');
        button.addEventListener('click', newitem, false);
        show();
    }
    function newitem() {
        var keyword = document.getElementById('keyword').value;
        var value = document.getElementById('text').value;
        sessionStorage.setItem(keyword, value);
        show();
        document.getElementById('keyword').value = '';
        document.getElementById('text').value = '';
    }
    function show() {
        var databox = document.getElementById('databox');
        databox.innerHTML ='' ;
        for (var f = 0; f < sessionStorage.length; f++) {
            var keyword = sessionStorage.key(f);
            var value = sessionStorage.getItem(keyword);
            databox.innerHTML += '<div>' + keyword + ' - ' + value + '</div>';
    
        }
    
    }
    
    window.addEventListener('load', initiate, false);

    По содержанию созданный sessionStorage.js подобен localStorage.js.

  • Наполним страницу Like.html следующим кодом разметки:
    <!DOCTYPE  html> 
    <html lang="ru"> 
    <head>
     <title>Like</title> <link rel="stylesheet" href="css/index.css"> 
     <script type="text/javascript" src="js/sessionStorage.js"></script>
    </head> 
    <body>
        <h3> <img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a>  
    <img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a><br></h3>
    <section id="formbox"> 
        <form name="form">
    <p>Фирма производитель:</p>
        <p><input type="text" name="keyword" id="keyword"></p> 
        <p>Характеристики:<br /><input type ="text" name="text" id="text" ></p>
    <p><input type ="button" id ="button" name ="button" value="Отправить"/></p><br />
    </form> 
        <h2>Мои заказы:</h2>
    <section id = "databox"> Мои заказы: </section> <br />
    </section> 
    </body> 
    </html>

    В приведенном коде используются средства работы с временной памятью мобильного устройства из sessionStorage.js.

    Вводимые пользователем данные (фирма, характеристики) сохраняются в sessionStorage и сразу выводятся в поле databox страницы.

    Результаты запуска страницы Like.html:

    Результат нажатия кнопки "Отправить":

  • Вернуться к учебному плану