隨着商城小程序的出現，許多網站能夠用簡單、高效的小程序商城源碼(如音頻、視頻、地理位置等)取代JavaScript插件和代碼。商城小程序標簽使開發人員的工作更容易，同時提高了頁面加載時間和站點性能。特別是小程序商城網絡存儲，因為它允許用戶的瀏覽器在不使用服務器的情況下存儲用戶數據。
源碼及演示：xcxyms.top
商城小程序源碼主要使用PHP等服務器端語言來存儲用戶數據並將其從一個頁面傳遞到另一個頁面。使用JavaScript后端框架，如Node.js，我們可以達到同樣的目標。然而，在本教程中，我們將逐步向您展示如何使用HTML5和一些小JavaScript代碼構建一個購物車。本教程中技術的其他用途還包括在網站和原生移動應用上存儲用戶首選項、用戶最喜歡的內容、願望列表和用戶設置(如名稱和密碼)，而無需使用數據庫。
許多高流量小程商城序依賴復雜的技術，如服務器集群、DNS負載平衡器、客戶端和服務器端緩存、分布式數據庫和微服務來優化性能和可用性。實際上，動態網站的主要挑戰是從數據庫中獲取數據，並使用服務器端語言(如PHP)來處理它們。但是，遠程數據庫存儲應該只用於必要的網站內容，如文章和用戶憑證。類似於cookie，用戶首選項等功能可以存儲在用戶的瀏覽器中。同樣,當您構建一個本地移動應用程序,您可以使用商城小程序 web存儲與本地數據庫來提高應用程序的速度。因此,作為前端開發人員,我們需要探索的方式我們可以利用小程序商城源碼存儲的力量在我們的應用程序在開發的早期階段。
我曾經是一個開發大型社交網站的團隊的一員，我們大量使用小程序網絡存儲。例如，當用戶登錄時，我們將散列后的用戶ID存儲在小程序會話中，並使用它在受保護的頁面上對用戶進行身份驗證。我們還使用這個功能來存儲所有新的推送通知——比如新的聊天消息、網站消息和新的提要——並將它們從一個頁面傳遞到另一個頁面。當一個社交網站獲得高流量時，完全依賴服務器來進行負載平衡可能不起作用，所以你必須識別用戶的瀏覽器可以處理的任務和數據，而不是你的服務器。
項目背景 #
購物車允許網站訪問者查看產品頁面並將商品添加到購物車中。訪問者可以查看他們所有的條目並更新他們的購物車(例如添加或刪除條目)。為了實現這一點，網站需要存儲訪問者的數據，並將它們從一個頁面傳遞到另一個頁面，直到訪問者進入結帳頁面並進行購買。存儲數據可以通過服務器端語言或客戶端語言來完成。使用服務器端語言，服務器承擔數據存儲的重量，而使用客戶端語言，訪問者的計算機(桌面、平板電腦或智能手機)存儲和處理數據。每種方法都有其優缺點。在本教程中，我們將重點介紹一種簡單的基於HTML5和JavaScript的客戶端方法。
注:為了能夠遵循本教程，HTML5, CSS和JavaScript的基本知識是必需的。
商城小程序存儲概述 #
商城小程序web存儲允許web應用程序在瀏覽器本地存儲能夠在瀏覽器會話中存活的值，就像cookie一樣。不像cookies需要在每次HTTP請求時發送，web存儲數據從來不會傳輸到服務器;因此，web存儲在web性能上優於cookie。此外，cookie允許每個域只存儲4kb的數據，而web存儲每個域至少允許5mb的數據。商城小程序存儲就像一個簡單的數組，將鍵映射到值，它們有兩種類型:
●會話存儲將數據存儲在一個瀏覽器會話中，直到瀏覽器或瀏覽器選項卡關閉時數據才可用。從同一窗口打開的彈出窗口可以看到會話存儲，同樣可以在同一窗口內的iframes。但是，來自同一來源(URL)的多個窗口不能看到彼此的會話存儲。
●本地存儲將數據存儲在瀏覽器中，沒有過期時間。這些數據對具有相同來源(域)的所有窗口都可用，甚至在瀏覽器或瀏覽器選項卡重新打開或關閉時也是如此。
目前所有主要的web瀏覽器都支持這兩種存儲類型。請記住，不能將存儲數據從一個瀏覽器傳遞到另一個瀏覽器，即使兩個瀏覽器都在訪問相同的域。
建立一個基本的購物車 #
為了構建購物車，我們首先創建一個小程序頁面，其中包含一個簡單的購物車來顯示商品，以及一個簡單的表單來添加或編輯購物車。然后，我們添加HTML web存儲到它，然后是JavaScript編碼。盡管我們使用的是HTML5本地存儲標記，但所有步驟都與HTML5會話存儲相同，可以應用於HTML5會話存儲標記。最后，我們將為那些對使用jQuery感興趣的人介紹一些jQuery代碼，作為JavaScript代碼的替代。
添加商城小程序源碼本地存儲到購物車 #
我們的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" onclick="SaveItem()"> <input type="button" value="Update" onclick="ModifyItem()"> <input type="button" value="Delete" onclick="RemoveItem()"> </fieldset> <div id="items_table"> <h2>Shopping List</h2> <table id="list"></table> <label><input type="button" value="Clear" onclick="ClearAll()"> * Delete all items</label> </div> </form>
將JavaScript添加到購物車 #
我們將在onload()事件中創建並調用JavaScript函數doShowAll()，以檢查瀏覽器支持，並動態創建顯示存儲名值對的表。
$( window ).load(function() { doShowAll(); }); 或者，你也可以使用JavaScript的onload事件，把它添加到JavaScript代碼中: window.load = doShowAll (); $( window ).load(function() { doShowAll(); });
在doShowAll()中，如果CheckBrowser()函數首先計算瀏覽器支持，那么它將在頁面加載期間動態創建購物列表表。可以在JavaScript循環中迭代存儲在本地存儲中的鍵-值對的鍵(屬性名)，如下所示。該方法根據存儲值動態填充表，以顯示存儲在本地存儲中的鍵值對。
/* =====> 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; } }
注意:您或您的框架將擁有創建新DOM節點和處理事件的首選方法。為了保持清晰和重點，我們的示例使用了. innerhtml和內聯事件處理程序，盡管我們通常在生產代碼中避免使用這些處理程序。
// 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'); } }
總結 #
在本教程中，我們學習了如何使用HTML5 web存儲和JavaScript一步一步地構建商城小程序源碼。我們已經了解了如何使用jQuery來替代JavaScript。我們還討論了用於處理購物車中的數組和對象的stringify和parse等JSON函數。您可以在本教程的基礎上添加更多特性，比如在JavaScript多維數組中存儲數據的同時添加產品類別和子類別。此外，您可以用jQuery替換整個JavaScript代碼。