การสร้างตะกร้าสินค้าด้วย HTML5 Web Storage

ด้วยการถือกำเนิดของ HTML5 ไซต์จำนวนมากสามารถแทนที่ปลั๊กอินและโค้ด JavaScript ด้วยโค้ด HTML ที่เรียบง่ายและมีประสิทธิภาพมากขึ้น เช่น เสียง วิดีโอ ตำแหน่งทางภูมิศาสตร์ ฯลฯ แท็ก HTML5 ทำให้งานของนักพัฒนาซอฟต์แวร์ง่ายขึ้นมากในขณะที่เพิ่มเวลาในการโหลดหน้าเว็บและประสิทธิภาพของไซต์ โดยเฉพาะอย่างยิ่ง พื้นที่จัดเก็บเว็บ HTML5 เป็นตัวเปลี่ยนเกม เนื่องจากอนุญาตให้เบราว์เซอร์ของผู้ใช้จัดเก็บข้อมูลผู้ใช้โดยไม่ต้องใช้เซิร์ฟเวอร์ ดังนั้น การสร้างที่เก็บข้อมูลบนเว็บทำให้นักพัฒนาส่วนหน้าสามารถบรรลุเพิ่มเติมบนเว็บไซต์ของพวกเขาโดยไม่ต้องรู้หรือใช้การเข้ารหัสหรือฐานข้อมูลฝั่งเซิร์ฟเวอร์

เว็บไซต์อีคอมเมิร์ซออนไลน์ส่วนใหญ่ใช้ภาษาฝั่งเซิร์ฟเวอร์ เช่น PHP เพื่อจัดเก็บข้อมูลของผู้ใช้และส่งผ่านจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง การใช้เฟรมเวิร์กแบ็คเอนด์ของ JavaScript เช่น Node.js ทำให้เราบรรลุเป้าหมายเดียวกันได้ อย่างไรก็ตาม ในบทช่วยสอนนี้ เราจะแสดงให้คุณเห็นทีละขั้นตอนถึงวิธีการสร้างตะกร้าสินค้าด้วย HTML5 และโค้ด JavaScript เล็กน้อยบางส่วน การใช้เทคนิคอื่นๆ ในบทช่วยสอนนี้คือการจัดเก็บการตั้งค่าของผู้ใช้ เนื้อหาโปรดของผู้ใช้ รายการสิ่งที่อยากได้ และการตั้งค่าผู้ใช้ เช่น ชื่อและรหัสผ่านบนเว็บไซต์และแอปมือถือทั่วไปโดยไม่ต้องใช้ฐานข้อมูล

เว็บไซต์ที่มีการเข้าชมสูงหลายแห่งใช้เทคนิคที่ซับซ้อน เช่น การทำคลัสเตอร์เซิร์ฟเวอร์ DNS โหลดบาลานซ์ การแคชฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ ฐานข้อมูลแบบกระจาย และไมโครเซอร์วิส เพื่อเพิ่มประสิทธิภาพและความพร้อมใช้งาน อันที่จริง ความท้าทายที่สำคัญสำหรับเว็บไซต์แบบไดนามิกคือการดึงข้อมูลจากฐานข้อมูลและใช้ภาษาฝั่งเซิร์ฟเวอร์ เช่น PHP เพื่อประมวลผล อย่างไรก็ตาม การจัดเก็บฐานข้อมูลระยะไกลควรใช้สำหรับเนื้อหาเว็บไซต์ที่จำเป็นเท่านั้น เช่น บทความและข้อมูลรับรองของผู้ใช้ คุณสมบัติต่างๆ เช่น ค่ากำหนดของผู้ใช้สามารถเก็บไว้ในเบราว์เซอร์ของผู้ใช้ได้ เช่นเดียวกับคุกกี้ ในทำนองเดียวกัน เมื่อคุณสร้างแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่อง คุณสามารถใช้พื้นที่จัดเก็บเว็บ HTML5 ร่วมกับฐานข้อมูลในเครื่องเพื่อเพิ่มความเร็วของแอปได้ ดังนั้น ในฐานะนักพัฒนาฟรอนต์เอนด์ เราจำเป็นต้องสำรวจวิธีที่เราสามารถใช้ประโยชน์จากพลังของพื้นที่จัดเก็บเว็บ HTML5 ในแอปพลิเคชันของเราในช่วงเริ่มต้นของการพัฒนา

ฉันเคยเป็นส่วนหนึ่งของทีมพัฒนาเว็บไซต์โซเชียลขนาดใหญ่ และเราใช้พื้นที่จัดเก็บเว็บ HTML5 อย่างหนัก ตัวอย่างเช่น เมื่อผู้ใช้เข้าสู่ระบบ เราจะเก็บ ID ผู้ใช้ที่แฮชไว้ในเซสชัน HTML5 และใช้เพื่อรับรองความถูกต้องของผู้ใช้ในหน้าที่มีการป้องกัน เรายังใช้คุณลักษณะนี้เพื่อจัดเก็บข้อความ Push ใหม่ทั้งหมด เช่น ข้อความแชทใหม่ ข้อความเว็บไซต์ และฟีดใหม่ และส่งผ่านจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง เมื่อเว็บไซต์โซเชียลมีการเข้าชมสูง การพึ่งพาเซิร์ฟเวอร์ทั้งหมดสำหรับการทำโหลดบาลานซ์อาจไม่ทำงาน ดังนั้นคุณต้องระบุงานและข้อมูลที่สามารถจัดการได้โดยเบราว์เซอร์ของผู้ใช้แทนที่จะเป็นเซิร์ฟเวอร์ของคุณ

ประวัติโครงการ

ตะกร้าสินค้าช่วยให้ผู้เยี่ยมชมเว็บไซต์สามารถดูหน้าสินค้าและเพิ่มรายการลงในตะกร้าของตนได้ ผู้เข้าชมสามารถตรวจทานสินค้าทั้งหมดและอัปเดตตะกร้าสินค้าได้ (เช่น เพื่อเพิ่มหรือนำสินค้าออก) เพื่อให้บรรลุสิ่งนี้ เว็บไซต์จำเป็นต้องจัดเก็บข้อมูลของผู้เข้าชมและส่งต่อจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง จนกว่าผู้เยี่ยมชมจะไปที่หน้าชำระเงินและทำการซื้อ การจัดเก็บข้อมูลสามารถทำได้โดยใช้ภาษาฝั่งเซิร์ฟเวอร์หรือฝั่งไคลเอ็นต์ ด้วยภาษาฝั่งเซิร์ฟเวอร์ เซิร์ฟเวอร์จะรับน้ำหนักของการจัดเก็บข้อมูล ในขณะที่ภาษาฝั่งไคลเอ็นต์ คอมพิวเตอร์ของผู้เยี่ยมชม (เดสก์ท็อป แท็บเล็ต หรือสมาร์ทโฟน) จะจัดเก็บและประมวลผลข้อมูล แต่ละวิธีมีข้อดีและข้อเสีย ในบทช่วยสอนนี้ เราจะเน้นที่แนวทางฝั่งไคลเอ็นต์อย่างง่าย โดยอิงตาม HTML5 และ JavaScript

หมายเหตุ : เพื่อให้สามารถทำตามบทช่วยสอนนี้ได้ จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ HTML5, CSS และ JavaScript

ไฟล์โครงการ

คลิกที่นี่เพื่อดาวน์โหลดไฟล์ต้นทางของโครงการ คุณสามารถดูการสาธิตสดได้เช่นกัน

ภาพรวมของ HTML5 Web Storage

ที่จัดเก็บเว็บ HTML5 ช่วยให้เว็บแอปพลิเคชันสามารถเก็บค่าไว้ในเบราว์เซอร์ที่สามารถคงอยู่ในเซสชันของเบราว์เซอร์ได้ เช่นเดียวกับคุกกี้ ต่างจากคุกกี้ที่ต้องส่งไปพร้อมกับคำขอ HTTP ทุกครั้ง ข้อมูลที่จัดเก็บบนเว็บจะไม่ถูกถ่ายโอนไปยังเซิร์ฟเวอร์ ดังนั้นที่เก็บข้อมูลเว็บจึงมีประสิทธิภาพเหนือกว่าคุกกี้ในประสิทธิภาพของเว็บ นอกจากนี้ คุกกี้ยังให้คุณจัดเก็บข้อมูลได้เพียง 4 KB ต่อโดเมน ในขณะที่พื้นที่จัดเก็บเว็บอนุญาตอย่างน้อย 5 MB ต่อโดเมน ที่เก็บข้อมูลบนเว็บทำงานเหมือนอาร์เรย์ธรรมดา การจับคู่คีย์กับค่า และมีสองประเภท:

• การจัดเก็บเซสชัน
  ข้อมูลนี้จะจัดเก็บข้อมูลในเซสชันหนึ่งของเบราว์เซอร์ ซึ่งจะพร้อมใช้งานจนกว่าเบราว์เซอร์หรือแท็บเบราว์เซอร์จะปิด หน้าต่างป๊อปอัปที่เปิดจากหน้าต่างเดียวกันสามารถเห็นพื้นที่จัดเก็บเซสชั่น และ iframes ภายในหน้าต่างเดียวกันก็เช่นกัน อย่างไรก็ตาม หน้าต่างหลายบานจากต้นทางเดียวกัน (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()">

หรือคุณสามารถใช้เหตุการณ์ onload ของ JavaScript โดยเพิ่มสิ่งนี้ในโค้ด 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

เราจะสร้างองค์ประกอบ div HTML แยกต่างหากเพื่อบันทึกการป้อนข้อมูลและการส่งของผู้ใช้ เราจะแนบฟังก์ชัน 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 ขั้นแรก เพิ่ม 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(); }

ในการอัปเดตรายการในตะกร้าสินค้า คุณต้องตรวจสอบก่อนว่าคีย์ของรายการนั้นมีอยู่ในที่จัดเก็บในเครื่องหรือไม่ จากนั้นจึงอัปเดตค่าดังที่แสดงด้านล่าง:

 //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 ของปุ่ม "Clear":

 <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