พื้นที่เก็บข้อมูลเว็บ JavaScript API คือสิ่งที่เบราว์เซอร์ มีไว้สำหรับจัดเก็บข้อมูลที่ปลอดภัย บนเบราว์เซอร์ภายในเครื่องของผู้ใช้
localStorage และ sessionStorage คือที่เก็บข้อมูลบนเว็บ 2 ประเภทหลัก มีลักษณะคล้ายกับ Objects ทั่วไป แต่จะคงอยู่ เมื่อโหลดหน้าเว็บซ้ำ
บทความนี้มีจุดมุ่งหมายเพื่อแสดงให้คุณเห็นว่า Objects เก็บข้อมูลทั้งสองทำงานอย่างไรใน JavaScript
Local Storage คืออะไร?
localStorage จัดเก็บข้อมูลที่ยังคงมีอยู่แม้ว่าผู้ใช้จะปิดแท็บหรือหน้าต่างเบราว์เซอร์
อธิบายคือ สิ่งใดก็ตามที่ถูกจัดเก็บไว้ใน localStorage จะไม่หายไประหว่างการโหลดหรือเปิดหน้าเว็บใหม่ หรือเมื่อผู้ใช้ปิดเบราว์เซอร์ ข้อมูลเหล่านั้นไม่มีวันหมดอายุ เบราว์เซอร์จะไม่ล้างข้อมูลเหล่านั้นโดยอัตโนมัติ
localStorage จะถูกลบข้อมูลในกรณีต่อไปนี้เท่านั้น
- เมื่อเนื้อหาถูกล้างผ่าน JavaScript
- เมื่อแคชของเบราว์เซอร์ถูกล้าง
การใช้งาน
// เก็บข้อมูล
localStorage.setItem(key, value);
// รับข้อมูล
localStorage.getItem(key);
// ลบข้อมูลด้วยคีย์
localStorage.removeItem(key);
// ลบข้อมูลทั้งหมด
localStorage.clear();
Session Storage คืออะไร?
sessionStorage เก็บข้อมูลที่คงอยู่เพียงเซสชันเดียวของแท็บที่เปิดอยู่
อธิบายคือ สิ่งใดก็ตามที่ถูกจัดเก็บไว้ใน sessionStorage จะไม่หายไปเมื่อมีการโหลดหน้าเว็บซ้ำ sessionStorage จะถูกลบข้อมูลที่เก็บไว้เฉพาะเมื่อผู้ใช้ปิดแท็บหรือหน้าต่างเบราว์เซอร์เท่านั้น
เบราว์เซอร์จะสร้างข้อมูลเซสชันที่ไม่ซ้ำกันสำหรับแต่ละแท็บหรือหน้าต่างใหม่ ดังนั้นผู้ใช้สามารถเรียกใช้ข้อมูลเซสชันได้โดยที่ข้อมูลจะไม่ทับซ้อนกันกับแท็บหรือหน้าต่างอื่นๆ
การใช้งาน
// เก็บข้อมูล
sessionStorage.setItem(key, value);
// รับข้อมูล
sessionStorage.getItem(key);
// ลบข้อมูลด้วยคีย์
sessionStorage.removeItem(key);
// ลบข้อมูลทั้งหมด
sessionStorage.clear();
localStorage และ sessionStorage ต่างกันอย่างไร?
1. การเก็บข้อมูลในเบราว์เซอร์
localStorage : จะเก็บข้อมูลในเบราว์เซอร์แบบถาวร หรือก็คือข้อมูลจะยังคงอยู่หลังจากผู้ใช้ปิดเบราว์เซอร์และเปิดขึ้นมาใหม่
sessionStorage : จะเก็บข้อมูลในเซสชัน (session) ของผู้ใช้ หมายความว่าข้อมูลจะหายไปเมื่อผู้ใช้ปิดเบราว์เซอร์หรือหน้าเว็บนั้นถูกปิดลง
2. ความสามารถในการเข้าถึงข้อมูล
localStorage : ข้อมูลที่เก็บไว้ใน localStorage สามารถเข้าถึงได้ทุกเวลาและที่ทุกหน้าของเว็บไซต์ โดยไม่มีข้อจำกัดในการเข้าถึง
sessionStorage : ข้อมูลที่เก็บไว้ใน sessionStorage สามารถเข้าถึงได้เฉพาะในเซสชันปัจจุบันเท่านั้น หากเปิดหน้าต่างหรือแท็บใหม่ของเว็บไซต์ ข้อมูลใน sessionStorage จะไม่ถูกแชร์ระหว่างเซสชัน
3. การใช้งานในกรณีต่าง ๆ
localStorage : มักนำมาใช้เพื่อเก็บข้อมูลที่ต้องการให้ยังคงอยู่ทุกครั้งที่ผู้ใช้เข้าเว็บไซต์ ไม่ว่าจะเป็นการเก็บข้อมูลการตั้งค่า ข้อมูลการเข้าสู่ระบบ หรือข้อมูลอื่น ๆ ที่ต้องการให้ถูกเก็บไว้ในระยะยาว
sessionStorage : มักนำมาใช้เพื่อเก็บข้อมูลชั่วคราว เช่น ข้อมูลที่ต้องการให้ถูกลบเมื่อผู้ใช้ปิดหน้าเว็บนั้นลง อย่างข้อมูลที่ใช้ในการกรอกแบบฟอร์มหรือข้อมูลชั่วคราวอื่น ๆ
สรุป
การใช้งาน localStorage และ sessionStorage ในการเก็บข้อมูลหรือแม้แต่ cookie เองก็ตาม จะมีลักษณะและวัตถุประสงค์การใช้งานที่แตกต่างกัน และควรใช้งานตามความเหมาะสมและวัตถุประสงค์ของแต่ละระบบหรือแอปพลิเคชันที่พัฒนา
