使用 HTML5 Web 存储创建购物车

已发表: 2022-03-10

快速总结↬本教程将向您展示如何通过逐步创建购物车来利用 HTML5 Web 存储的强大功能。您从本教程中学到的内容可以轻松地应用于可能不需要数据库存储的其他站点功能，例如用户首选项、用户最喜欢的内容、愿望清单、用户名和密码等用户设置等。

更新（8 月 27,29 日）编者注：我们更新了示例以解决 HTML 中的可访问性问题。

随着 HTML5 的出现，许多网站能够用更简单、更高效的 HTML 代码（如音频、视频、地理定位等）替换 JavaScript 插件和代码。HTML5 标签使开发人员的工作变得更加轻松，同时提高了页面加载时间和网站性能。特别是，HTML5 网络存储改变了游戏规则，因为它们允许用户的浏览器在不使用服务器的情况下存储用户数据。因此，Web 存储的创建允许前端开发人员在他们的网站上完成更多工作，而无需了解或使用服务器端编码或数据库。

在线电子商务网站主要使用 PHP 等服务器端语言来存储用户数据并将它们从一个页面传递到另一个页面。使用 Node.js 等 JavaScript 后端框架，我们可以实现相同的目标。但是，在本教程中，我们将逐步向您展示如何使用 HTML5 和一些小的 JavaScript 代码构建购物车。本教程中技术的其他用途是在不使用数据库的情况下存储用户偏好、用户最喜欢的内容、愿望清单以及用户设置（如网站和本机移动应用程序上的名称和密码）。

许多高流量网站依靠复杂的技术来优化性能和可用性，例如服务器集群、DNS 负载平衡器、客户端和服务器端缓存、分布式数据库和微服务。事实上，动态网站的主要挑战是从数据库中获取数据并使用诸如 PHP 之类的服务器端语言来处理它们。但是，远程数据库存储应仅用于基本的网站内容，例如文章和用户凭据。用户偏好等功能可以存储在用户的浏览器中，类似于 cookie。同样，当您构建原生移动应用程序时，您可以结合使用 HTML5 Web 存储和本地数据库来提高应用程序的速度。因此，作为前端开发人员，我们需要探索在开发的早期阶段在我们的应用程序中利用 HTML5 Web 存储的强大功能的方法。

我一直是开发大型社交网站的团队的一员，我们大量使用 HTML5 网络存储。例如，当用户登录时，我们将经过哈希处理的用户 ID 存储在 HTML5 会话中，并使用它在受保护页面上对用户进行身份验证。我们还使用此功能来存储所有新的推送通知——例如新的聊天消息、网站消息和新的订阅源——并将它们从一个页面传递到另一个页面。当社交网站获得高流量时，完全依赖服务器进行负载平衡可能不起作用，因此您必须确定可以由用户浏览器而不是服务器处理的任务和数据。

跳跃后更多！继续往下看↓

项目背景

购物车允许网站的访问者查看产品页面并将商品添加到他们的购物篮。访问者可以查看他们的所有项目并更新他们的购物篮（例如添加或删除项目）。为此，网站需要存储访问者的数据并将它们从一个页面传递到另一个页面，直到访问者进入结帐页面并进行购买。存储数据可以通过服务器端语言或客户端语言来完成。对于服务器端语言，服务器承担数据存储的重量，而对于客户端语言，访问者的计算机（台式机、平板电脑或智能手机）存储和处理数据。每种方法都有其优点和缺点。在本教程中，我们将重点介绍基于 HTML5 和 JavaScript 的简单客户端方法。

注意：为了能够学习本教程，需要 HTML5、CSS 和 JavaScript 的基本知识。

项目文件

单击此处下载项目的源文件。您也可以观看现场演示。

HTML5 Web 存储概述

HTML5 Web 存储允许 Web 应用程序在浏览器中本地存储可以在浏览器会话中存活的值，就像 cookie 一样。与需要随每个 HTTP 请求一起发送的 cookie 不同，Web 存储数据永远不会传输到服务器；因此，网络存储在网络性能方面优于 cookie。此外，cookie 允许您每个域仅存储 4 KB 的数据，而 Web 存储允许每个域至少 5 MB。 Web 存储就像一个简单的数组，将键映射到值，它们有两种类型：

会话存储
这会将数据存储在一个浏览器会话中，在关闭浏览器或浏览器选项卡之前，它一直可用。从同一窗口打开的弹出窗口可以看到会话存储，同一窗口内的 iframe 也可以。但是，来自同一来源 (URL) 的多个窗口无法看到彼此的会话存储。
本地存储
这会将数据存储在没有过期日期的 Web 浏览器中。数据可用于具有相同来源（域）的所有窗口，即使重新打开或关闭浏览器或浏览器选项卡也是如此。

目前所有主要的网络浏览器都支持这两种存储类型。请记住，即使两个浏览器都访问同一个域，您也不能将存储数据从一个浏览器传递到另一个浏览器。

建立一个基本的购物车

为了构建我们的购物车，我们首先创建一个 HTML 页面，其中包含一个简单的购物车来显示商品，以及一个简单的表单来添加或编辑购物篮。然后，我们向其中添加 HTML Web 存储，然后是 JavaScript 编码。虽然我们使用的是 HTML5 本地存储标签，但所有步骤都与 HTML5 会话存储相同，并且可以应用于 HTML5 会话存储标签。最后，我们将为那些对使用 jQuery 感兴趣的人介绍一些 jQuery 代码，作为 JavaScript 代码的替代方案。

将 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 添加到购物车

我们将在onload()事件中创建并调用 JavaScript 函数doShowAll()以检查浏览器支持并动态创建显示存储名称-值对的表。

 <body onload="doShowAll()">

或者，您可以通过将其添加到 JavaScript 代码来使用 JavaScript onload 事件：

 window.load=doShowAll();

或者将其用于 jQuery：

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

在CheckBrowser()函数中，我们想检查浏览器是否支持 HTML5 存储。请注意，可能不需要此步骤，因为大多数现代 Web 浏览器都支持它。

 /* =====> 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 Web 存储中获取值，而不是从数据库中获取值。在这一部分中，我们将向您展示如何将数据插入 HTML5 存储引擎。也就是说，我们将结合 JavaScript 使用 HTML5 本地存储将新商品插入购物车，以及编辑购物车中的现有商品。

注意：我在下面添加了提示部分来显示 jQuery 代码，作为 JavaScript 代码的替代。

我们将创建一个单独的 HTML div元素来捕获用户输入和提交。我们将在按钮的onClick事件中附加相应的 JavaScript 函数。

 <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(); }

下面是SaveItem函数的 jQuery 替代方案。首先，在表单输入中添加一个 ID：

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

然后，按 ID 选择表单输入，并获取它们的值。正如您在下面看到的，它比 JavaScript 简单得多：

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

要更新购物车中的商品，首先要检查该商品的key是否已经存在于本地存储中，然后更新它的值，如下所示：

 //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(); }

提示：与前两个函数类似，您可以在RemoveItem函数中使用 jQuery 选择器。

本地存储还有另一种方法，可让您清除整个本地存储。我们在“清除”按钮的onClick事件中调用ClearAll()函数：

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

我们使用clear方法来清除本地存储，如下图：

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

会话存储

sessionStorage对象的工作方式与localStorage相同。您可以将上面的示例替换为sessionStorage对象，以在一个会话后使数据过期。一旦用户关闭浏览器窗口，存储将被清除。简而言之， localStorage和sessionStorage的 API 是相同的，允许您使用以下方法：

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 Web 存储和 JavaScript 逐步构建购物车。我们已经看到了如何使用 jQuery 作为 JavaScript 的替代品。我们还讨论了 JSON 函数，如 stringify 和 parse 来处理购物车中的数组和对象。您可以在本教程的基础上添加更多功能，例如添加产品类别和子类别，同时将数据存储在 JavaScript 多维数组中。此外，您可以用 jQuery 替换整个 JavaScript 代码。

我们已经看到开发人员可以使用 HTML5 网络存储完成哪些其他事情，以及他们可以添加到他们的网站的其他功能。例如，您可以使用本教程在网站和本地移动应用程序上存储用户偏好、收藏内容、愿望清单和用户设置（如名称和密码），而无需使用数据库。

总而言之，在实现 HTML5 Web 存储时需要考虑以下几个问题：

某些用户可能具有阻止浏览器存储数据的隐私设置。
一些用户可能会在隐身模式下使用他们的浏览器。
请注意一些安全问题，例如 DNS 欺骗攻击、跨目录攻击和敏感数据泄露。