รู้จักกับ Web Storage API

บล็อกนี้เรามาดูกันว่า Web Storage API นั้นกี่อย่าง แต่ละอย่างเป็นอย่างไรบ้าง และนำไปใช้ในกรณีไหนได้บ้าง เอาละไปดูกันเลยคัรบ

ยุคก่อนที่จะมี HTML5

Photo by hadijasaidi

ในยุคก่อนที่จะมี HTML5 ข้อมูลของแอพพลิเคชันจะเก็บไว้ใน cookies
และเจ้า cookies นั้นเองจะถูกแนบไปกับ request และส่งไปที่ server ทุกครั้ง

หากข้อมูลยังไม่ใหญ่มากผู้รับก็ยังสบายตัวอยู่ ทว่าเมื่อข้อมูลที่ถูกเก็บนั้นมีมากขึ้น เช่น รายการช็อปปิ้งที่เพิ่มไปในตะกร้าแต่ยังไม่ได้ซื้อ ยิ่งเรา เพิ่มของในตะกร้ามากชิ้นขึ้น แต่ไม่ได้เอาออกจากตะกร้าเลย และยังคงเพิ่มขึ้นต่อไปเรื่อย ๆ
// แต่ยังไม่มีเงินจะซื้อ … เพิ่มในตะกร้าไว้ก่อน

อย่างที่กล่าวไปตอนต้นว่า cookie จะถูกแนบไปกับ request header และส่งไปที่ server ทุกครั้ง เมื่อของในตะกร้าเราเพิ่มขึ้นเรื่อย ๆ จะถึงจุด limt ที่ server รับได้ ทำให้แอพพลิเคชันเราใช้งานไม่ได้ ใช้ได้ก็ช้า กระทั่งเจ๊งไปในที่สุด

เมื่อยุค HTML5 มาถึง

ในสเปค HTML5 มี API หนึ่งที่เรียกว่า Web Storage เป็นตัวแทนของการเก็บข้อมูลใน Browser ในรูปของ key — value และมี API มาให้เราเรียกใช้งานโดยเฉพาะคือ

1. sessionStorage
2. localStorage

เรามาดูรายละเอียดแต่ละ API กันด้านล่างครับ แต่ไม่ได้มีตัวอย่างโค้ดให้นะเพราะตัวอย่างหาได้ตาม internet เลย หรือสามารถคลิกเข้าไปในแหล่งอ้างอิงด้านล่างสุดได้

👉 Session Storage

ลักษณะการเก็บข้อมูลจะเป็นการเก็บข้อมูลแค่ใน session นั้น กล่าวคือเมื่อ Browser หรือ Tab ถูกปิดไปข้อมูลที่เก็บโดยใช้ session storage จะหายไปทันที

💁‍♂️ Use cases

The login form that contains two inputs, checkbox, and login button

• หากใครคุ้นเคย Form ที่มี checkbox เขียนว่า Remember me แต่เราไม่ได้กด ลักษณะนี้เหมาะมากครับ
• ข้อมูลอะไรที่ค่อนข้างจะ sensitive หรืออยากให้ถูกเคลียออกไปทันทีหลังจาก user ไม่ได้ใช้งานแล้ว

⚠️ ข้อควรระวัง

• พื้นที่ในการเก็บข้อมูลจะมีประมาณ 5MB หรือเก็บตัวอักษรได้ 5242880 ตัว

👉Local Storage

localStorage นั้นเรียกแทบไม่ต่างกับ sessionStorage ในแง่ของการเก็บข้อมูล
จุดต่างจะอยู่ตรงที่เมื่อผู้ใช้ปิด Browser หรือ Tab ไปข้อมูลจะยังคงอยู่

💁‍♀️ Use cases

• เก็บ state การตั้งค่าต่าง ๆ ของแอพพลิเคชัน
• บันทึกข้อมูลที่ผู้ใช้กรอกแต่ยังไม่ได้กดส่ง เมื่อ user ปิดหน้าเว็บไปข้อมูลจะถูกโหลดขึ้นมาทำให้ User Experience ดียิ่งขึ้น
• Cached ข้อมูลที่ดาวน์โหลดมาก่อนหน้าเพื่อให้แอพพลิเคชันเปิดขึ้นมาเร็วยิ่งขึ้น

… ยังมีอีกหลาย use case ครับถ้าใครเคยใช้แบบไหนที่น่าสนใจก็แชร์กันได้

ข้อดีอีกอย่างหนึ่งของ localStorage คือสามารถเก็บขนาดของข้อมูลได้มากกว่า sessionStorage และ cookie และจะอยู่ใน local เท่านั้น

⚠️ ข้อควรระวัง

• พื้นที่ในการเก็บข้อมูลจะมีประมาณ 10MB เก็บตัวอักษรได้ 10485760 ตัว (2 เท่าจาก sessionStorage)
• ไม่ได้ support ในทุก browser – โดยเฉพาะรุ่นที่เก่ามาก เราอาจต้องเช็คก่อนว่ารุ่นปัจจุบันรองรับหรือเปล่า หรืออาจใช้ polyfills เพื่อให้ browser รุ่นเก่าสามารถใช้งานได้
• ไม่สามารถเชื่อถือได้ในมุมของการเก็บข้อมูลแบบ long-term หรือถาวร เพราะ storage สามารถถูกเคลียทิ้งได้โดย user ได้ – เราอาจใช้ตัวเลือกอื่นสำหรับการเก็ยข้อมูลในลักษณะนี้เช่น IndexedDB หรือ Cache API
• ข้อมูลที่เก็บจะอยู่บนเครื่องตัวเองเท่านั้น ไม่ได้แชร์ไป devices ต่าง ๆ ที่ใช้งานอยู่ต่าง

📌 สรุป

Photo by raf vit

ใน HTML5 มี API ให้ใช้การเก็บข้อมูล 2 รูปแบบคือ

• sessionStroage → ใช้เก็บข้อมูลระยะสั้น เมื่อ Browser หรือ Tab ถูกปิดไปข้อมูลจะหายไปด้วย, พื้นที่เก็บประมาณ 5MB
• localStorage → ใช้เก็บข้อมูลระยะยาว เมื่อ Browser หรือ Tab ถูกปิดไปข้อมูลจะยังคงอยู่, เก็บได้ประมาณ 10MB

หากเราเลือกใช้ API Storage ให้ถูกประเภทและเหมาะกับสถานการณ์จะทำให้สามารถเพิ่ม User Experience, Performance ให้กับแอพพลิเคชันของเราได้ในบางมุมที่เราอาจคิดไม่ถึง ลองนำไปใช้กันดูนะครับ

ส่งท้าย

นอกจาก API สองตัวนี้ยังมีอีกตัวหนึ่งที่น่าสนใจคือ IndexedDB ที่ยังไม่เคยลองเหมือนกัน ว่ากันว่าใช้เก็บข้อมูลที่ใหญ่ได้มากกว่า มีประสิทธิภาพมากกว่าเพราะไม่ได้ทำงานแบบ synchronize เผื่อใครสนใจอยากจะหาข้อมูลเพิ่มต่อ

แหล่งอ้างอิง

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
• https://javascript.info/localstorage
• https://www.freecodecamp.org/news/how-web-storage-works
• https://www.cloudflare.com/learning/privacy/what-are-cookies/
• https://www.w3schools.com/html/html5_webstorage.asp
• https://html.spec.whatwg.org/multipage/webstorage.html#webstorage
• https://www.w3.org/TR/2016/REC-webstorage-20160419/#storage