localStorage เทียบกับ sessionStorage

ส่วนติดต่อโปรแกรมพื้นที่จัดเก็บข้อมูลเว็บมีพื้นที่จัดเก็บข้อมูลแบบคีย์-ค่าฝั่งไคลเอ็นต์สองแบบ ได้แก่ localStorage ซึ่งคงอยู่ข้ามเซสชัน และ sessionStorage ซึ่งถูกล้างเมื่อปิดแท็บ ทั้งสองแบบจัดเก็บค่าเป็นสตริง และสามารถเข้าถึงแบบซิงโครนัสผ่าน JavaScript ได้เมื่ออยู่ในต้นทางเดียวกัน

ข้อมูลใน localStorage จะคงอยู่จนกว่าจะถูกล้างอย่างชัดเจนด้วยโค้ด โดยผู้ใช้ หรือด้วยการลบข้อมูลเบราว์เซอร์ ข้อมูลยังคงอยู่หลังการเริ่มเบราว์เซอร์ใหม่ การรีเฟรชหน้าเว็บ และการปิดแท็บ โดยทั่วไปความจุอยู่ที่ 5-10MB ต่อต้นทาง ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์

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

พื้นที่จัดเก็บข้อมูลทั้งสองแบบใช้ส่วนติดต่อโปรแกรมเดียวกัน ได้แก่ setItem(key, value), getItem(key), removeItem(key), clear() และพร็อพเพอร์ตี้ length โค้ดเดียวกันใช้ได้กับทั้งสองแบบ เพียงแทนที่ localStorage ด้วย sessionStorage หรือแทนที่กลับกัน

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

พื้นที่จัดเก็บข้อมูลทั้งสองแบบกำหนดขอบเขตอย่างเคร่งครัดตามต้นทาง ซึ่งประกอบด้วยโพรโทคอล + โฮสต์ + พอร์ต https://example.com ไม่สามารถอ่าน localStorage ที่กำหนดโดย http://example.com ได้ นี่คือขอบเขตด้านความปลอดภัย โดยโดเมนย่อยก็เป็นต้นทางแยกกันเช่นเดียวกัน เว้นแต่จะมีการแก้ไข document.domain ซึ่งเลิกใช้งานแล้ว

เบราว์เซอร์ส่วนใหญ่กำหนดขีดจำกัดประมาณ 5MB ต่อต้นทาง หากใช้เกินขีดจำกัด จะเกิดข้อผิดพลาด QuotaExceededError ความต้องการจัดเก็บข้อมูลขนาดใหญ่ควรใช้ IndexedDB ซึ่งรองรับข้อมูลแบบมีโครงสร้างได้หลายกิกะไบต์ พื้นที่จัดเก็บข้อมูลเว็บเหมาะสำหรับคู่คีย์-ค่าขนาดเล็ก ไม่ใช่ข้อมูลไบนารีหรือชุดข้อมูลขนาดใหญ่

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

พื้นที่จัดเก็บข้อมูลเว็บจัดเก็บได้เฉพาะสตริง ให้แปลงวัตถุเป็นอนุกรมด้วย JSON.stringify(); และแปลงกลับด้วย JSON.parse() จัดการความล้มเหลวของ parse: try { return JSON.parse(stored) } catch { return defaultValue } ค่าที่เสียหายหรือไม่อยู่ในรูปแบบข้อมูลที่ถูกต้องจะทำให้เกิดข้อผิดพลาดจากการแปลง

localStorage ในโหมดส่วนตัวหรือไม่ระบุตัวตนจะถูกล้างเมื่อปิดหน้าต่างส่วนตัวทั้งหมด จึงมีพฤติกรรมเหมือน sessionStorage โค้ดที่ใช้ localStorage สำหรับสถานะการยืนยันตัวตนควรรองรับกรณีที่ localStorage ถูกล้างโดยไม่คาดคิด

เบราว์เซอร์จำกัดการเข้าถึงพื้นที่จัดเก็บข้อมูลของบุคคลที่สามมากขึ้นเรื่อย ๆ เฟรมแบบฝังจากเว็บไซต์ของบุคคลที่สามบนเว็บไซต์ต้นทางไม่สามารถเข้าถึง localStorage ของเว็บไซต์ของบุคคลที่สามได้ ITP ของเบราว์เซอร์ซาฟารีและการป้องกันการติดตามขั้นสูงของไฟร์ฟอกซ์แบ่งพื้นที่จัดเก็บข้อมูลออกเป็นส่วน ๆ แต่การใช้งานจากต้นทางจะไม่ได้รับผลกระทบ

sessionStorage ถูกล้างเมื่อใด

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