การอ่านและเขียน localStorage ใน React

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

สิ่งนี้อยู่บนออบเจ็กต์หน้าต่าง window และมีขอบเขตแยกตามต้นทาง กล่าวคือแต่ละโดเมนจะมีพื้นที่จัดเก็บที่แยกจากกัน

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

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

localStorage จัดเก็บได้เฉพาะข้อความ หากต้องการเก็บออบเจ็กต์หรืออาร์เรย์ คุณต้องแปลงข้อมูลเป็นข้อความก่อนด้วย JSON.stringify(value) แล้วจึงเรียกใช้ setItem

หากคุณจัดเก็บค่าที่ไม่ใช่ข้อความโดยตรง ระบบจะแปลงค่านั้นเป็นข้อความ ดังนั้นออบเจ็กต์จะกลายเป็นข้อความไร้ประโยชน์อย่าง [object Object]

เมื่ออ่านข้อมูล คุณจะเรียกใช้ JSON.parse(localStorage.getItem(key)) แต่การแยกวิเคราะห์อาจทำให้เกิดข้อผิดพลาดได้ หากข้อความที่จัดเก็บเสียหายหรือถูกเขียนโดยแหล่งอื่น

ครอบการแยกวิเคราะห์ไว้ใน try/catch และใช้ค่าเริ่มต้นเป็นทางเลือกสำรอง เพื่อไม่ให้ข้อมูลที่ผิดพลาดทำให้คอมโพเนนต์หยุดทำงาน

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

การทดสอบที่ปลอดภัยคือใช้ try/catch เพื่อสร้างและลบคีย์ชั่วคราว แล้วคืนค่าเป็นเท็จหากเกิดข้อผิดพลาด

เบราว์เซอร์ส่วนใหญ่จำกัด localStorage ไว้ที่ประมาณห้าเมกะไบต์ต่อออริจิน การใช้เกินขีดจำกัดนี้จะทำให้เกิด QuotaExceededError ขณะเขียนข้อมูล

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

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

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

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

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

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

เลือก sessionStorage สำหรับข้อมูลอายุสั้นที่ใช้เฉพาะแท็บ และเลือก localStorage สำหรับค่ากำหนดที่ต้องการให้คงอยู่

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

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

ตัวช่วยขั้นต่ำจะเขียนข้อมูลด้วย localStorage.setItem(key, JSON.stringify(value)) และอ่านข้อมูลโดยใช้ try/catch ครอบ JSON.parse(localStorage.getItem(key)) พร้อมคืนค่าเริ่มต้นเมื่อเกิดข้อผิดพลาด

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

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

คุณยังได้เปรียบเทียบ localStorage กับ sessionStorage คุกกี้ และ IndexedDB เพื่อเลือกพื้นที่จัดเก็บข้อมูลที่เหมาะสม