使用 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 欺騙攻擊、跨目錄攻擊和敏感數據洩露。