JavaScript localStorage: คู่มือการใช้งาน

Web applications อาจซับซ้อนได้เร็วมาก สิ่งที่ผมเรียนรู้จากการเป็น developer คือ มีอะไรทำได้มากมายกับ plain JavaScript ถ้าให้โอกาส

localStorage API เป็น powerful built-in function ที่ลดความจำเป็นต้องใช้ databases สำหรับแอปพลิเคชันง่ายๆ ที่ไม่ต้องการ server เราสามารถใช้ API นี้บันทึกข้อมูล locally ซึ่งแอปพลิเคชันของเราสามารถเข้าถึงได้

ในคู่มือนี้ เราจะพูดถึงวิธีใช้ localStorage method ใน JavaScript จะวิ่งผ่านตัวอย่างการใช้ localStorage บันทึกเนื้อหาฟอร์มไว้ใช้ภายหลังบนหน้าเว็บ มาเริ่มกัน!

localStorage คืออะไร?

localStorage เป็นส่วนหนึ่งของ web storage API API นี้อนุญาตให้เก็บข้อมูลไว้ใน browser ของผู้ใช้ ซึ่งแอปพลิเคชันของคุณเข้าถึงได้

Storage API มีประโยชน์เพราะหมายความว่าคุณไม่ต้องส่งข้อมูลทุกอย่างเกี่ยวกับ session ของผู้ใช้ไปที่ database ถ้าผู้ใช้เปิด dark mode บนไซต์ คุณติดตามได้ที่ client side ถ้าผู้ใช้บันทึกฟอร์มไว้ใช้ภายหลัง คุณไม่ต้องเก็บฟอร์มครึ่งทางใน database

มี web storage สองประเภท localStorage คือข้อมูลที่อยู่ใน browser window ของผู้ใช้แม้หลังปิด browser tab แล้ว ต่างจาก cookies localStorage data คือข้อมูลที่ไม่มี expiration date sessionStorage คือข้อมูลที่อยู่จนกว่า session จะหมดอายุ คือจนกว่าจะปิด browser

ในโพสต์นี้ เราจะเน้นที่ localStorage object แต่คุณสามารถแทนที่ด้วย sessionStorage ได้ เพราะทั้งคู่ใช้ syntax เดียวกัน

วิธีใช้ localStorage

ก่อนเจาะลึกตัวอย่าง มาเดินดู methods ที่ localStorage เสนอ

เพื่อสร้าง localStorage entry ใช้ method setItem():

localStorage.setItem("name", "Linda Carlton"); console.log(localStorage);

โค้ดคืนค่า:

{ name: "Linda Carlton", length: 1 }

localStorage เก็บ items เป็น key:value pairs ในตัวอย่าง เราสร้าง item "name" มีค่า "Linda Carlton"

เราใช้ console.log() พิมพ์เนื้อหา localStorage เพื่อเช็คว่าค่าเพิ่มเข้าไปแล้ว

คุณสามารถใช้โค้ดเดียวกันนี้อัปเดตค่าที่เก็บใน localStorage ได้

เพื่อดึงค่าจาก localStorage ใช้ method getItem():

localStorage.getItem("name");

โค้ดคืนค่า:

Linda Carlton.

มีสอง methods สำหรับลบข้อมูลจาก localStorage:

• removeItem(): ลบ item เดียวจาก localStorage
• clear(): ลบทุก item ใน localStorage()

ถ้าต้องการลบ "name" item จาก local storage:

localStorage.removeItem(name); console.log(localStorage);

โค้ดคืนค่า:

{ length: 0 }

สังเกตว่าแม้เราจะ clear localStorage ยังมี item หนึ่งเก็บอยู่: length บอกจำนวน items ที่เก็บใน localStorage ตอนนี้ไม่มีอะไรเก็บอยู่แล้ว

สำคัญคือ localStorage เก็บได้แค่ strings เท่านั้น

สร้างฟีเจอร์บันทึกฟอร์มด้วย localStorage

เราทุกคนเคยอยู่บนเว็บที่ขอให้กรอกฟอร์มยาวๆ ถ้าไม่สำคัญมาก ผมอยากกลับมากรอกภายหลัง นั่นคือเหตุผลที่หลายไซต์มีฟีเจอร์ "save form" เก็บรายละเอียดฟอร์มไว้

บางไซต์ติดตามข้อมูลใน database แตคุณทำ lightweight version ได้ด้วย localStorage method

สร้าง Front End

เราจะสร้าง customer feedback form สำหรับร้านชาท้องถิ่น The Little Tea House ขั้นแรก สร้าง front-end สร้างไฟล์ index.html วางโค้ดนี้:

<!DOCTYPE html> <html> <head> <title>The Little Tea House Feedback</title> <link rel="stylesheet" href="./styles.css" /> </head> <body> <div> <h1>The Little Tea House: Customer Feedback</h1> <p>How was your experience at The Little Tea House? We'd love to learn more!</p> <form> <label for="name">Name: </label> <input id="name" type="text" /><br /><br /> <label for="email">Email: </label> <input id="email" type="email" /><br /><br /> <label for="feedback">Message: </label><br /><br /> <textarea id="feedback"></textarea><br /><br /> <button id="saveButton">Save form</button> <button id="retrieveButton">Retrieve form</button> </form> </div> <script src="./form.js"></script> </body> </html>

โค้ดสร้าง HTML page พื้นฐานพร้อมฟอร์มฟิลด์:

ไซต์ของเราพร้อมแล้ว แต่เพิ่ม styles ให้สวยขึ้น สร้าง styles.css วางโค้ดนี้:

div { margin-left: 15vw; margin-right: 15vw; background-color: lightblue; padding: 20px; }

กลับไปเว็บ refresh หน้า:

ฟอร์มอยู่กลางหน้าเว็บ พื้นหลังสีฟ้า ดูดีแล้ว! ต่อไปเขียน JavaScript

สร้างฟีเจอร์บันทึกฟอร์ม

ขั้นตอนต่อไป เก็บค่าจากฟอร์มฟิลด์ จากด้านบน form fields มี IDs:

• name (Name field)
• email (Email field)
• feedback (Message field)

เราใช้ IDs นี้ดึงค่าจากแต่ละฟอร์มฟิลด์ สร้าง form.js วางโค้ดนี้:

var nameField = document.getElementById("name"); var emailField = document.getElementById("email"); var feedbackField = document.getElementById("feedback");

ประกาศเป็น "var" เพราะจะเปลี่ยนค่าภายหลัง เรายังดึงปุ่มมาเพื่อทำให้คลิกได้ภายหลัง:

var saveButton = document.getElementById("saveButton"); var retrieveButton = document.getElementById("retrieveButton");

ขั้นตอนต่อไป สร้างฟังก์ชันบันทึกค่าเหล่านี้ลง localStorage เมื่อกดปุ่ม:

function saveResponses() { localStorage.setItem("name", nameField.value); localStorage.setItem("email", emailField.value); localStorage.setItem("feedback", feedbackField.value); }

โค้ดนี้ไม่รันจนกว่า saveResponses() จะถูก invoke ทำยังไง? ผูกกับปุ่ม โค้ดนี้เรียกฟังก์ชันเมื่อคลิกปุ่ม:

saveButton.addEventListener("click", saveResponses);

ตอนนี้กด "Save form" responses จะเก็บใน localStorage

แต่เก็บไว้ไม่ได้ประโยชน์ถ้าดึงไม่คืนมา เราจะเขียนฟังก์ชันดึงข้อมูลเมื่อกด "Retrieve form":

function retrieveResponses() { nameField.value = localStorage.getItem("name"); emailField.value = localStorage.getItem("email"); feedbackField.value = localStorage.getItem("feedback"); } retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });

โค้ดตั้งค่าแต่ละฟอร์มฟิลด์ให้เป็นค่าที่เก็บใน localStorage ถ้ามีค่า ตอนนี้ลองรันโค้ด:

ฟอร์มเหมือนเดิม ลองใส่ค่าในฟอร์มกด "Save form" จะบันทึก responses

ตอนนี้ refresh หน้า กด "Retrieve form" จะสังเกตว่าข้อมูลฟอร์มถูกบันทึก! ข้อมูลใน localStorage จะคงอยู่แม้ปิด tab จะไม่ถูกลบเมื่อปิด browser เราทำได้!

Form responses จะอยู่จนกว่าคุณจะ save ใหม่ หรือ clear cache

หมายเหตุ: ไม่ควรใช้เทคนิคนี้เก็บข้อมูล敏感 ข้อมูลทั้งหมดใน localStorage เก็บเป็น plain text เข้าถึงได้โดยทุก user ที่อ่านมัน

สรุป

localStorage method อนุญาตให้เก็บข้อมูล locally ใน JavaScript สำหรับแอปพลิเคชันง่ายๆ เช่น to-do list, บันทึก user preferences, หรือบันทึกฟอร์มผู้ใช้ (ไม่รวมข้อมูล敏感) มันดีกว่าใช้ database localStorage ตั้งค่าง่าย ใช้ง่าย และเป็น 100% vanilla JavaScript

ตอนนี้คุณพร้อมใช้ localStorage method แบบ expert JavaScript developer แล้ว!