Создание корзины покупок с веб-хранилищем HTML5

С появлением HTML5 многие сайты смогли заменить плагины и коды JavaScript простыми и более эффективными HTML-кодами, такими как аудио, видео, геолокация и т. д. Теги HTML5 значительно облегчили работу разработчиков, увеличив время загрузки страницы и производительность сайта. В частности, веб-хранилище HTML5 изменило правила игры, поскольку оно позволяет браузерам пользователей хранить пользовательские данные без использования сервера. Таким образом, создание веб-хранилища позволило разработчикам переднего плана добиться большего на своем веб-сайте, не зная и не используя кодирование на стороне сервера или базу данных.

Интернет-сайты электронной коммерции в основном используют серверные языки, такие как PHP, для хранения данных пользователей и передачи их с одной страницы на другую. Используя серверные фреймворки JavaScript, такие как Node.js, мы можем достичь той же цели. Однако в этом руководстве мы шаг за шагом покажем вам, как создать корзину для покупок с помощью HTML5 и небольшого количества кода JavaScript. Другими способами использования методов, описанных в этом руководстве, могут быть хранение пользовательских настроек, избранного контента пользователя, списков пожеланий и пользовательских настроек, таких как имя и пароль, на веб-сайтах и ​​в собственных мобильных приложениях без использования базы данных.

Многие веб-сайты с высокой посещаемостью используют сложные методы, такие как кластеризация серверов, балансировщики нагрузки DNS, кэширование на стороне клиента и на стороне сервера, распределенные базы данных и микросервисы для оптимизации производительности и доступности. Действительно, основная проблема динамических веб-сайтов заключается в извлечении данных из базы данных и использовании серверного языка, такого как PHP, для их обработки. Однако удаленное хранилище базы данных следует использовать только для основного содержимого веб-сайта, такого как статьи и учетные данные пользователей. Такие функции, как пользовательские настройки, могут храниться в браузере пользователя, аналогично файлам cookie. Аналогичным образом, когда вы создаете собственное мобильное приложение, вы можете использовать веб-хранилище HTML5 в сочетании с локальной базой данных, чтобы увеличить скорость вашего приложения. Таким образом, как фронтенд-разработчики, мы должны изучить способы использования возможностей веб-хранилища HTML5 в наших приложениях на ранних стадиях разработки.

Я был частью команды, разрабатывающей крупномасштабный социальный веб-сайт, и мы активно использовали веб-хранилище HTML5. Например, когда пользователь входит в систему, мы сохраняем хешированный идентификатор пользователя в сеансе HTML5 и используем его для аутентификации пользователя на защищенных страницах. Мы также используем эту функцию для хранения всех новых push-уведомлений, таких как новые сообщения чата, сообщения веб-сайта и новые каналы, и передаем их с одной страницы на другую. Когда социальный веб-сайт получает большой трафик, полная зависимость от сервера для балансировки нагрузки может не сработать, поэтому вам необходимо определить задачи и данные, которые могут обрабатываться браузером пользователя, а не вашими серверами.

история проекта

Корзина позволяет посетителю веб-сайта просматривать страницы продуктов и добавлять товары в свою корзину. Посетитель может просматривать все свои товары и обновлять свою корзину (например, добавлять или удалять товары). Для этого веб-сайт должен хранить данные посетителя и передавать их с одной страницы на другую, пока посетитель не перейдет на страницу оформления заказа и не совершит покупку. Хранение данных может осуществляться с помощью языка на стороне сервера или на стороне клиента. При использовании серверного языка сервер несет ответственность за хранение данных, тогда как при использовании клиентского языка компьютер посетителя (рабочий стол, планшет или смартфон) хранит и обрабатывает данные. Каждый подход имеет свои плюсы и минусы. В этом руководстве мы сосредоточимся на простом клиентском подходе, основанном на HTML5 и JavaScript.

Примечание . Чтобы следовать этому руководству, необходимы базовые знания HTML5, CSS и JavaScript.

Файлы проекта

Нажмите здесь, чтобы загрузить исходные файлы проекта. Вы также можете увидеть живую демонстрацию.

Обзор веб-хранилища HTML5

Веб-хранилище HTML5 позволяет веб-приложениям хранить значения локально в браузере, которые могут пережить сеанс браузера, как и файлы cookie. В отличие от файлов cookie, которые необходимо отправлять с каждым HTTP-запросом, данные веб-хранилища никогда не передаются на сервер; таким образом, веб-хранилище превосходит файлы cookie в веб-производительности. Кроме того, файлы cookie позволяют хранить только 4 КБ данных на домен, тогда как веб-хранилище позволяет хранить не менее 5 МБ на домен. Веб-хранилище работает как простой массив, сопоставляя ключи со значениями, и они бывают двух типов:

• Хранилище сеансов
  Это сохраняет данные в одном сеансе браузера, где они становятся доступными до тех пор, пока браузер или вкладка браузера не будут закрыты. Всплывающие окна, открытые из того же окна, могут видеть хранилище сеанса, как и фреймы внутри того же окна. Однако несколько окон из одного источника (URL) не могут видеть хранилище сеансов друг друга.
• Локальное хранилище
  Это сохраняет данные в веб-браузере без даты истечения срока действия. Данные доступны для всех окон с одним и тем же источником (доменом), даже когда браузер или вкладки браузера повторно открываются или закрываются.

Оба типа хранилища в настоящее время поддерживаются во всех основных веб-браузерах. Имейте в виду, что вы не можете передавать данные хранилища из одного браузера в другой, даже если оба браузера посещают один и тот же домен.

Создайте базовую корзину для покупок

Чтобы построить нашу корзину покупок, мы сначала создаем HTML-страницу с простой корзиной для отображения товаров и простой формой для добавления или редактирования корзины. Затем мы добавляем к нему веб-хранилище HTML, после чего кодируем JavaScript. Хотя мы используем теги локального хранилища HTML5, все шаги идентичны действиям с хранилищем сеансов HTML5 и могут быть применены к тегам хранилища сеансов HTML5. Наконец, мы рассмотрим некоторый код jQuery в качестве альтернативы коду JavaScript для тех, кто заинтересован в использовании jQuery.

Добавить локальное хранилище HTML5 в корзину

Наша HTML-страница — это базовая страница с тегами для внешнего JavaScript и CSS, указанными в заголовке.

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

Ниже приведен HTML-контент, отображаемый в теле страницы:

 <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete"> </fieldset> <div> <h2>Shopping List</h2> <table></table> <label><input type="button" value="Clear"> * Delete all items</label> </div> </form>

Добавление JavaScript в корзину

Мы создадим и вызовем функцию JavaScript doShowAll() в событии onload() , чтобы проверить поддержку браузера и динамически создать таблицу, которая показывает пару имя-значение хранилища.

 <body onload="doShowAll()">

Кроме того, вы можете использовать событие JavaScript onload, добавив это в код JavaScript:

 window.load=doShowAll();

Или используйте это для jQuery:

 $( window ).load(function() { doShowAll(); });

В функции CheckBrowser() мы хотели бы проверить, поддерживает ли браузер хранилище HTML5. Обратите внимание, что этот шаг может не потребоваться, поскольку его поддерживают большинство современных веб-браузеров.

 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

Внутри doShowAll() , если CheckBrowser() сначала оценивает поддержку браузера, то она будет динамически создавать таблицу для списка покупок во время загрузки страницы. Вы можете перебирать ключи (имена свойств) пар ключ-значение, хранящихся в локальном хранилище, внутри цикла JavaScript, как показано ниже. На основе значения хранилища этот метод динамически заполняет таблицу, чтобы показать пару ключ-значение, хранящуюся в локальном хранилище.

 // Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

Примечание . Либо у вас, либо у вашей платформы будет предпочтительный метод создания новых узлов DOM и обработки событий. Чтобы все было ясно и четко, в нашем примере используются .innerHTML и встроенные обработчики событий , хотя обычно мы избегаем этого в производственном коде.

Совет. Если вы хотите использовать jQuery для привязки данных, вы можете просто заменить document.getElementById('list').innerHTML = list; с помощью $('#list').html()=list; .

Запустите и протестируйте корзину

В предыдущих двух разделах мы добавили код в заголовок HTML и добавили HTML в форму корзины покупок и корзину. Мы также создали функцию JavaScript для проверки поддержки браузера и заполнения корзины товарами в корзине. При заполнении элементов корзины JavaScript извлекает значения из веб-хранилища HTML, а не из базы данных. В этой части мы покажем вам, как данные вставляются в механизм хранения HTML5. То есть мы будем использовать локальное хранилище HTML5 в сочетании с JavaScript для добавления новых товаров в корзину, а также для редактирования существующего товара в корзине.

Примечание . Ниже я добавил разделы с советами, чтобы показать код jQuery в качестве альтернативы кодам JavaScript.

Мы создадим отдельный HTML-элемент div для захвата пользовательского ввода и отправки. Мы добавим соответствующую функцию JavaScript в событие onClick для кнопок.

 <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete">

Вы можете установить свойства объекта localStorage аналогично обычному объекту JavaScript. Вот пример того, как мы можем установить для свойства локального хранилища myProperty значение myValue :

 localStorage.myProperty="myValue";

Вы можете удалить свойство локального хранилища следующим образом:

 delete localStorage.myProperty;

Кроме того, вы можете использовать следующие методы для доступа к локальному хранилищу:

 localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

Чтобы сохранить пару ключ-значение, получите значение соответствующего объекта JavaScript и вызовите метод setItem :

 function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

Ниже приведена альтернатива jQuery для функции SaveItem . Во-первых, добавьте идентификатор во входные данные формы:

 <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label>

Затем выберите входы формы по идентификатору и получите их значения. Как вы можете видеть ниже, это намного проще, чем JavaScript:

 function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

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

 //Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

Ниже показана альтернатива jQuery.

 function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

Мы будем использовать метод removeItem для удаления элемента из хранилища.

 function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

Совет: Как и в предыдущих двух функциях, вы можете использовать селекторы jQuery в функции RemoveItem .

Есть еще один метод для локального хранилища, который позволяет очистить все локальное хранилище. Мы вызываем функцию ClearAll() в событии onClick кнопки «Очистить»:

 <input type="button" value="Clear">

Мы используем метод clear для очистки локального хранилища, как показано ниже:

 function ClearAll() { localStorage.clear(); doShowAll(); }

Хранилище сеансов

Объект sessionStorage работает так же, как и localStorage . Вы можете заменить приведенный выше пример объектом sessionStorage , чтобы срок действия данных истек после одного сеанса. Как только пользователь закроет окно браузера, хранилище будет очищено. Короче говоря, API для localStorage и sessionStorage идентичны, что позволяет использовать следующие методы:

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index)
• length

Тележки для покупок с массивами и объектами

Поскольку веб-хранилище HTML5 поддерживает только хранилище с одним именем и значением, вы должны использовать JSON или другой метод для преобразования ваших массивов или объектов в одну строку. Вам может понадобиться массив или объект, если у вас есть категория и подкатегории товаров или если у вас есть корзина для покупок с несколькими данными, такими как информация о покупателе, информация об элементе и т. д. Вам просто нужно преобразовать элементы массива или объекта в строку. чтобы сохранить их в веб-хранилище, а затем взорвать (или разделить) их обратно в массив, чтобы показать их на другой странице. Давайте рассмотрим базовый пример корзины для покупок с тремя наборами информации: информация о покупателе, информация о товаре и настраиваемый почтовый адрес. Во-первых, мы используем JSON.stringify для преобразования объекта в строку. Затем мы используем JSON.parse, чтобы отменить его.

Подсказка : Имейте в виду, что имя ключа должно быть уникальным для каждого домена.

 //Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

Резюме

В этом уроке мы узнали, как шаг за шагом создать корзину для покупок, используя веб-хранилище HTML5 и JavaScript. Мы увидели, как использовать jQuery в качестве альтернативы JavaScript. Мы также обсудили функции JSON, такие как stringify и parse, для обработки массивов и объектов в корзине. Вы можете использовать этот учебник, добавляя дополнительные функции, такие как добавление категорий продуктов и подкатегорий при сохранении данных в многомерном массиве JavaScript. Более того, вы можете заменить весь код JavaScript на jQuery.

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

В заключение, вот несколько вопросов, которые следует учитывать при реализации веб-хранилища HTML5:

• У некоторых пользователей могут быть настройки конфиденциальности, запрещающие браузеру сохранять данные.
• Некоторые пользователи могут использовать свой браузер в режиме инкогнито.
• Помните о нескольких проблемах безопасности, таких как атаки с подделкой DNS, атаки между каталогами и компрометация конфиденциальных данных.

Связанное Чтение

• «Ограничения хранения в браузере и критерии выселения», веб-документы MDN, Mozilla
• «Веб-хранилище», HTML Living Standard,
• «На этой неделе в HTML 5», блог WHATWG