sessionStorage, IndexedDB และการเลือก API ที่เหมาะสม

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

นอกจากนี้ยังแยกจากกันในแต่ละแท็บ ดังนั้นสองแท็บจึงไม่ใช้ข้อมูล sessionStorage ร่วมกัน

sessionStorage เหมาะอย่างยิ่งกับแบบฟอร์มหลายขั้นตอนที่ต้องการรักษาความคืบหน้าไว้ระหว่างการโหลดใหม่ภายในเซสชัน แต่ต้องการทิ้งข้อมูลเมื่อแท็บปิดลง

ผู้ใช้สามารถโหลดหน้าแบบฟอร์มใหม่ระหว่างกรอกข้อมูลได้โดยไม่สูญเสียข้อมูล แต่จะไม่มีข้อมูลใดคงค้างหลังจากทำเสร็จหรือออกจากหน้า

IndexedDB เป็นฐานข้อมูลแบบอะซิงโครนัสที่รองรับธุรกรรมและมีอยู่ในเบราว์เซอร์ สามารถจัดเก็บข้อมูลได้มากกว่าขีดจำกัด 5 MB ของ localStorage อย่างมาก และรองรับออบเจ็กต์ที่มีโครงสร้าง อาร์เรย์ รวมถึงข้อมูลไบนารี

เนื่องจากทำงานแบบอะซิงโครนัส จึงไม่บล็อกเธรดหลักเหมือน localStorage

API ดั้งเดิมของ IndexedDB มีรายละเอียดมากและทำงานด้วยเหตุการณ์ ดังนั้นไลบรารีอย่าง idb-keyval จึงห่อหุ้มการทำงานไว้ในฟังก์ชันที่ใช้พรอมิสอย่างง่าย เช่น get set และ del

วิธีนี้มอบความสะดวกในการใช้งานแบบ localStorage พร้อมความจุและการทำงานแบบอะซิงโครนัสของ IndexedDB

เนื่องจาก IndexedDB สามารถจัดเก็บค่า Blob และ ArrayBuffer ได้ จึงเหมาะอย่างยิ่งสำหรับการแคชรูปภาพ เสียง ไฟล์ที่ดาวน์โหลด หรือทรัพยากรสำหรับออฟไลน์

ข้อมูลเหล่านี้จะเกินขีดจำกัดของ localStorage อย่างรวดเร็ว และต้องแปลงเป็นสตริงก่อน ซึ่งเป็นสิ่งที่ IndexedDB ไม่จำเป็นต้องทำ

API Cache ซึ่งมักใช้ร่วมกับ service worker จะจัดเก็บออบเจ็กต์ Response ของ HTTP ทั้งหมด โดยใช้คำขอเป็นคีย์ API นี้ออกแบบมาโดยเฉพาะสำหรับการแคชการตอบกลับจากเครือข่ายโดยเน้นการใช้งานแบบออฟไลน์

ใช้ API นี้เพื่อให้บริการทรัพยากรและการตอบกลับจาก API โดยไม่ต้องเข้าถึงเครือข่ายเมื่อออฟไลน์

localStorage จะคงอยู่ถาวรจนกว่าจะถูกล้าง sessionStorage จะอยู่เพียงตลอดเซสชันของแท็บ IndexedDB จะคงอยู่ถาวร และคุกกี้สามารถกำหนดเวลาหมดอายุได้ผ่านแอตทริบิวต์ของคุกกี้

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

localStorage และ sessionStorage จำกัดไว้ประมาณ 5MB ส่วนคุกกี้มีขนาดประมาณ 4KB ต่อชิ้น ขณะที่ IndexedDB สามารถใช้พื้นที่ได้หลายร้อยเมกะไบต์หรือมากกว่านั้น ขึ้นอยู่กับอุปกรณ์และเบราว์เซอร์

สำหรับข้อมูลขนาดใหญ่ IndexedDB เป็นตัวเลือกในเบราว์เซอร์ที่ใช้งานได้จริงเพียงตัวเดียว

localStorage, sessionStorage และคุกกี้ทำงานแบบซิงโครนัส ซึ่งบล็อกเธรดหลักระหว่างการเข้าถึงข้อมูล ส่วน IndexedDB และอินเทอร์เฟซแคชทำงานแบบอะซิงโครนัสและใช้โพรไมส์เป็นพื้นฐาน

การเข้าถึงแบบอะซิงโครนัสช่วยให้ส่วนติดต่อผู้ใช้ยังตอบสนองได้ แม้กำลังอ่านหรือเขียนข้อมูลปริมาณมาก

ให้ใช้คุกกี้ httpOnly สำหรับโทเค็นการยืนยันตัวตน เพื่อไม่ให้สคริปต์อ่านโทเค็นได้ ใช้ localStorage สำหรับค่ากำหนดขนาดเล็กที่คงอยู่ ใช้ IndexedDB สำหรับไฟล์ขนาดใหญ่และข้อมูลออฟไลน์ที่ซับซ้อน และใช้ sessionStorage สำหรับฉบับร่างอายุสั้นภายในแท็บ

ให้เลือกพื้นที่จัดเก็บให้เหมาะกับความอ่อนไหวของข้อมูล ขนาด และอายุการใช้งาน

ไม่มีอินเทอร์เฟซจัดเก็บข้อมูลใดดีที่สุดสำหรับทุกกรณี แต่ละแบบมีข้อแลกเปลี่ยนระหว่างความจุ การคงอยู่ พฤติกรรมการทำงานแบบซิงโครนัส และความปลอดภัย การทราบความแตกต่างเหล่านี้ช่วยให้คุณเลือกได้อย่างมีหลักการ

แอปทั่วไปมักใช้หลายแบบร่วมกัน ได้แก่ คุกกี้สำหรับการยืนยันตัวตน localStorage สำหรับค่ากำหนด และ IndexedDB สำหรับทรัพยากรออฟไลน์

ทดสอบความเข้าใจเกี่ยวกับการเลือกพื้นที่จัดเก็บข้อมูล

คุณได้เปรียบเทียบ sessionStorage, localStorage, IndexedDB, คุกกี้ และอินเทอร์เฟซแคชในด้านการคงอยู่ ความจุ พฤติกรรมการทำงานแบบซิงโครนัส และความปลอดภัย

คุณได้เรียนรู้วิธีเลือกตามกรณีใช้งาน ได้แก่ คุกกี้สำหรับการยืนยันตัวตน localStorage สำหรับค่ากำหนดขนาดเล็ก IndexedDB สำหรับข้อมูลขนาดใหญ่หรือซับซ้อน และ sessionStorage สำหรับฉบับร่างที่จำกัดขอบเขตอยู่ในแท็บ