บทนำ
เมื่อพัฒนาแอปพลิเคชันน้ำหนักเบา เราอาจต้องการจัดเก็บข้อมูลบางอย่าง หากฐานข้อมูลเกินความสามารถ – มีทางเลือกที่ดี: localStorage!
แม้ว่าจะไม่แทนที่ฐานข้อมูลสำหรับวัตถุประสงค์ของฐานข้อมูล แต่ก็ทำหน้าที่เป็นระบบจัดเก็บข้อมูลแบบไฟล์อย่างง่ายที่คุณสามารถใช้เพื่อจัดเก็บจุดข้อมูลที่เข้าถึงได้ง่าย
ในบทความนี้เราจะเรียนรู้วิธีการใช้งาน
localStorageเพื่อจัดเก็บข้อมูลในเบราว์เซอร์ของเราอย่างง่ายดาย ข้อมูลนี้ถูกบันทึกเป็น คู่คีย์ - ค่า ที่ผู้ใช้สามารถเรียกค้นคืนได้อย่างง่ายดาย
บันทึกข้อมูลไปที่ localStorage ใน React นั้นง่ายมาก:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
ถ้าคุณไม่รีบร้อนและต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงาน อ่านต่อไป!
ความหมายของ ที่จัดเก็บในเครื่อง?
localStorage เป็นออบเจ็กต์พื้นที่เก็บข้อมูลบนเว็บที่ช่วยให้นักพัฒนาสามารถจัดเก็บได้ คู่คีย์ - ค่า ในเว็บเบราว์เซอร์และรับรองว่าข้อมูลนี้จะคงอยู่ตลอดการรีเฟรชหน้าทั้งหมด แม้ว่าผู้ใช้จะปิดหรือรีสตาร์ทเบราว์เซอร์ – และไม่มีวันหมดอายุ คู่คีย์-ค่าที่จัดเก็บไว้สามารถรวมข้อมูลประเภทใดก็ได้ เช่น อาร์เรย์ ออบเจ็กต์ สตริง ตัวเลข และอื่นๆ อีกมากมาย
อย่างไรก็ตาม สิ่งนี้ไม่สามารถแทนที่บทบาทของฐานข้อมูลในเว็บไซต์และเว็บแอปของคุณได้ เนื่องจากข้อมูลจะสูญหายไปเมื่อผู้ใช้ล้างแคชของเบราว์เซอร์และที่จัดเก็บในเครื่อง – ท้ายที่สุดแล้ว ที่จัดเก็บในตัวเครื่อง และควรจะใช้อย่างนั้น อย่างไรก็ตาม มีบางสถานการณ์ที่ผู้ใช้สามารถใช้ได้ localStorageเช่นการนำ โหมดมืด คุณสมบัติ คงค่าอินพุตแบบฟอร์มของผู้ใช้ และอื่นๆ อีกมากมาย
localStorage มีเมธอดในตัวที่ช่วยให้เราเข้าถึงออบเจ็กต์ที่เก็บข้อมูลของเบราว์เซอร์ได้ ตัวอย่างหนึ่งคือ setItem() ซึ่งช่วยให้เราสามารถเพิ่มคีย์และค่าให้กับ localStorageจึงทำให้เราสามารถเก็บข้อมูลได้ ใช้วิธีอื่นในการดึงข้อมูล – getItem(), ลบข้อมูล – removeItem(), ลบทั้งหมด localStorage ตัวอย่าง - clear(), และอื่น ๆ
การจัดเก็บข้อมูลไปยัง ที่จัดเก็บในเครื่อง กับ เซ็ตไอเท็ม() วิธี
พื้นที่ setItem() วิธีการช่วยให้เราสามารถบันทึกค่าของชนิดข้อมูลใด ๆ ที่ localStorage โดยกำหนดค่าให้กับคีย์ ส่งผลให้ a คู่คีย์-ค่า. คีย์นี้จะใช้เพื่อดึงค่าที่สอดคล้องกันเมื่อใดก็ตามที่เราต้องการดึงมันจาก localStorage.
หมายเหตุ เพื่อเก็บข้อมูลใน localStorageเราต้องแปลงเป็น .ก่อน สตริง JSON โดยใช้โปรแกรม JSON.stringify() การทำงาน. และเมื่อเราต้องการดึงออกมา เราจะทำการ parse data โดยใช้ JSON.parse(), การแปลงสตริง JSON กลับเป็น a วัตถุ JSON.
เมื่อทำงานกับข้อมูลใน React เรามักใช้ ตะขอ เพื่อช่วยเราจัดเก็บ/ถือ Hooks ยังช่วยเราค้นหาตำแหน่งที่จะอัปโหลดข้อมูลนั้น นอกจากนี้ยังใช้กับ localStorage เพราะเราจะใช้ useState() และ useEffect() ตะขอ ตะขอเหล่านี้มีความสำคัญเนื่องจาก useState() hook ใช้เพื่อเก็บและตั้งค่าข้อมูลในขณะที่ useEffect() hook ถูกทริกเกอร์โดยค่าเริ่มต้นหลังจากการเรนเดอร์ครั้งแรกและเมื่อใดก็ตามที่สถานะส่งผ่านเมื่อพารามิเตอร์ที่สองเปลี่ยนแปลง
หลังจากอธิบายรากฐานแล้ว นี่คือรหัสที่เราจะใช้เพื่อเก็บข้อมูลใน localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
ขั้นแรกเราได้สร้างสถานะเพื่อเก็บข้อมูลที่เราต้องการเก็บไว้ในของเรา localStorageแล้วเราก็ได้สร้าง useEffect() ขอผ่านสถานะเป็นพารามิเตอร์ที่สอง ด้วยวิธีนี้ เมื่อใดก็ตามที่สถานะเปลี่ยนแปลง ข้อมูลใน localStorage ถูกอัพเดตเป็นค่าปัจจุบัน
เราจัดการฟังก์ชันการทำงานหลัก ซึ่งใช้เพื่อช่วยเราในการจัดเก็บข้อมูล ภายใน useEffect() ตะขอ:
localStorage.setItem('dataKey', JSON.stringify(data));
สรุป
ในบทความนี้ เราได้เรียนรู้วิธีการใช้ React hooks เพื่อเก็บข้อมูลใน React โดยใช้ localStorage. ตามที่ระบุไว้ก่อนหน้านี้ การดำเนินการนี้จะไม่แทนที่บทบาทของฐานข้อมูล แต่จะช่วยเราในการจัดเก็บข้อมูลที่เกี่ยวข้องกับผู้ใช้บางอย่างที่สามารถปรับปรุง UI ได้ แต่ไม่ได้ตั้งใจให้คงอยู่โดยอิสระของเบราว์เซอร์
