การซิงค์สถานะกับ localStorage
สร้าง hook แบบกำหนดเองชื่อ useLocalStorage ที่ซิงค์สถานะของ React กับ localStorage ได้ทั้งสองทิศทาง
การซิงค์สถานะกับ localStorage เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
แนวทางแบบมักง่ายทำให้ข้อมูลไม่ตรงกัน
สัญชาตญาณแรกอาจเป็นการอ่าน localStorage ที่หนึ่งและเขียนข้อมูลอีกที่หนึ่ง แต่ทั้งสองส่วนอาจค่อย ๆ ไม่สอดคล้องกัน การอัปเดตสถานะที่ลืมบันทึกข้อมูล หรือค่าที่บันทึกไว้แต่ไม่สะท้อนในสถานะ จะนำไปสู่ข้อผิดพลาด
คุณควรมีแหล่งข้อมูลหลักเพียงแห่งเดียวที่ทำให้สถานะของ React และพื้นที่จัดเก็บข้อมูลสอดคล้องกันตลอดเวลา
ฮุกแบบกำหนดเอง useLocalStorage
วิธีแก้ไขที่เป็นระเบียบคือฮุก useLocalStorage ที่ห่อหุ้ม useState และบันทึกการเปลี่ยนแปลงโดยอัตโนมัติ ฮุกนี้คืนค่าและตัวตั้งค่าเช่นเดียวกับ useState
ส่วนที่เรียกใช้จะใช้งานเหมือนสถานะปกติทุกประการ แต่ได้ความสามารถในการคงข้อมูลอยู่โดยไม่ต้องเขียนเพิ่ม
ฟังก์ชันเริ่มต้นแบบประเมินเมื่อจำเป็น
การอ่าน localStorage เป็นงานแบบซิงโครนัส ดังนั้นไม่ควรทำทุกครั้งที่แสดงผล ให้ส่งฟังก์ชันให้ useState ซึ่งเป็นตัวเริ่มต้นแบบประเมินเมื่อจำเป็น เพื่อให้การอ่านเกิดขึ้นเพียงครั้งเดียวตอนเริ่มแสดงผล
ภายในฟังก์ชันนั้น ให้แยกวิเคราะห์ค่าที่จัดเก็บไว้ หรือคืนค่าเริ่มต้นที่กำหนดให้
เหตุใดการเริ่มต้นแบบประเมินเมื่อจำเป็นจึงสำคัญ
หากคุณคำนวณสถานะเริ่มต้นโดยส่งนิพจน์เข้าไปโดยตรง นิพจน์นั้นจะทำงานทุกครั้งที่แสดงผล แม้ว่าหลังจากครั้งแรกจะไม่ถูกนำมาใช้แล้วก็ตาม แต่เมื่อใช้ฟังก์ชัน React จะเรียกใช้ฟังก์ชันนั้นเพียงครั้งเดียว
สำหรับการอ่าน localStorage วิธีนี้ช่วยหลีกเลี่ยงการทำงานแบบซิงโครนัสซ้ำ ๆ บนเธรดหลักในทุกครั้งที่แสดงผล
การซิงค์ผ่าน useEffect
หากต้องการบันทึกการอัปเดต ให้เพิ่ม useEffect ที่ทำงานทุกครั้งที่ค่าเปลี่ยนแปลง และเรียกใช้ localStorage.setItem(key, JSON.stringify(value))
การใส่ค่าไว้ในอาร์เรย์การพึ่งพาหมายความว่าการเปลี่ยนแปลงสถานะทุกครั้งจะเขียนลงพื้นที่จัดเก็บข้อมูลโดยอัตโนมัติ
การอัปเดตด้วยฟังก์ชันช่วยหลีกเลี่ยงคลอเชอร์เก่า
เมื่อตั้งค่าโดยอ้างอิงค่าก่อนหน้า ให้ใช้รูปแบบฟังก์ชัน setValue(prev => prev + 1) วิธีนี้ช่วยหลีกเลี่ยงคลอเชอร์เก่าที่อาจเขียนค่าซึ่งถูกจับไว้ก่อนหน้านี้
เรื่องนี้สำคัญเป็นพิเศษภายในตัวจัดการเหตุการณ์และเอฟเฟกต์ที่อาจเก็บภาพสถานะที่ล้าสมัยไว้
การจัดการค่าที่จัดเก็บเป็นค่าว่าง
getItem จะคืนค่า null เมื่อไม่มีคีย์นั้นอยู่ ตัวเริ่มต้นของคุณต้องตรวจพบกรณีนี้และใช้ค่าเริ่มต้นแทนการพยายามแยกวิเคราะห์ค่าว่าง
การตรวจสอบอย่าง stored != null ? JSON.parse(stored) : defaultValue จะจัดการการเข้าชมครั้งแรกได้อย่างเหมาะสม
เจเนอริกของ TypeScript
ใน TypeScript ให้กำหนดฮุกเป็นเจเนอริก: function useLocalStorage<T>(key: string, initial: T) วิธีนี้จะรักษาชนิดข้อมูลของค่าไว้ ทำให้ส่วนที่เรียกใช้ได้รับความปลอดภัยด้านชนิดข้อมูลอย่างครบถ้วน
ทูเพิลที่คืนค่าจะมีชนิดเป็น [T, Dispatch<SetStateAction<T>>] ซึ่งตรงกับ useState
การกำหนดเวอร์ชันข้อมูลที่จัดเก็บ
เมื่อเวลาผ่านไป โครงสร้างข้อมูลของคุณอาจเปลี่ยนแปลง และค่าที่จัดเก็บไว้แบบเก่าอาจทำให้โค้ดใหม่ทำงานผิดพลาด ให้จัดเก็บคีย์เวอร์ชันไว้พร้อมกับข้อมูล เพื่อให้ตรวจพบรูปแบบที่ล้าสมัยได้
ตัวอย่างเช่น ให้บันทึก { version: 2, data } แล้วเปรียบเทียบเวอร์ชันขณะอ่านข้อมูล
การล้างข้อมูลเมื่อเวอร์ชันไม่ตรงกัน
เมื่อเวอร์ชันที่จัดเก็บไว้ไม่ตรงกับเวอร์ชันปัจจุบัน ให้ทิ้งค่าหรือย้ายข้อมูลเก่าไปยังรูปแบบใหม่ แทนการเชื่อถือค่าดังกล่าว กลยุทธ์ที่ง่ายที่สุดคือการลบรายการที่ล้าสมัย แล้วใช้ค่าเริ่มต้นแทน
วิธีนี้ช่วยป้องกันข้อผิดพลาดจากข้อมูลที่บันทึกโดยแอปของคุณรุ่นเก่า
รวมฮุกเข้าด้วยกัน
useLocalStorage ที่สมบูรณ์ประกอบด้วยตัวเริ่มต้นแบบประเมินเมื่อจำเป็นซึ่งอ่านและแยกวิเคราะห์ข้อมูลอย่างปลอดภัย ตัวตั้งค่าที่รองรับการอัปเดตด้วยฟังก์ชัน และ useEffect ที่เขียนข้อมูลลงพื้นที่จัดเก็บพร้อมการกำหนดเวอร์ชัน
ผลลัพธ์คือตัวแทนที่นำมาใช้แทน useState ได้ทันที และยังคงอยู่หลังโหลดใหม่
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับการเริ่มต้นสถานะ
สรุปทบทวน
คุณได้เรียนรู้การสร้างฮุก useLocalStorage ด้วยตัวเริ่มต้นแบบประเมินเมื่อจำเป็น การบันทึกการเปลี่ยนแปลงผ่าน useEffect การใช้อัปเดตด้วยฟังก์ชันเพื่อหลีกเลี่ยงคลอเชอร์เก่า และการจัดการค่าว่าง
คุณยังได้เห็นการใช้เจเนอริกของ TypeScript และการกำหนดเวอร์ชันเพื่อล้างข้อมูลที่ล้าสมัยอย่างปลอดภัย
คำถามที่พบบ่อย
บทเรียน “การซิงค์สถานะกับ localStorage” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การซิงค์สถานะกับ localStorage” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การซิงค์สถานะกับ localStorage”
สร้าง hook แบบกำหนดเองชื่อ useLocalStorage ที่ซิงค์สถานะของ React กับ localStorage ได้ทั้งสองทิศทาง คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การซิงค์สถานะกับ localStorage” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การอ่านและเขียน localStorage ใน React
- การซิงค์สถานะกับ localStorage
- การจัดการเหตุการณ์พื้นที่จัดเก็บระหว่างแท็บ
- sessionStorage, IndexedDB และการเลือก API ที่เหมาะสม