การใช้ localStorage มีประโยชน์สำหรับการจัดเก็บข้อมูลผ่านการรีเฟรชหน้า แต่อาจทำให้เกิดข้อผิดพลาดบางอย่างโดยไม่เข้าใจวิธีการจัดเก็บข้อมูล localStorage เก็บข้อมูลเป็นสตริงเท่านั้น ดังนั้นเมื่อคุณบันทึกข้อมูลบางส่วน เช่น ตัวเลข localStorage.setItem("price", 1.20) ตัวเลขจะถูกแยกวิเคราะห์เป็นสตริงก่อนที่ค่าจะถูกบันทึก เพื่อแสดงสิ่งนี้ ฉันจะลองป้อนสิ่งนี้ลงในคอนโซลของเบราว์เซอร์:
localStorage.setItem("price", 1.20)
// => undefined
const price = localStorage.getItem("price")
// => '1.2'
typeof price
// => 'string'
เมื่อพยายามบันทึกวัตถุ (หรืออาร์เรย์) ปัญหาเดียวกันนี้เกิดขึ้น
localStorage.setItem("object", {one: 1, two: 2, three: 3})
// => undefined
localStorage.getItem("object")
// => '[object Object]'
เพื่อแก้ปัญหานี้ เราจำเป็นต้องแปลงออบเจ็กต์เป็น JSON เมื่อจัดเก็บไว้ใน localStorage เนื่องจาก JSON เป็นข้อมูลที่บันทึกเป็นสตริง เรายังจำเป็นต้องแปลงจาก JSON เมื่อดึงข้อมูลจาก localStorage
ในการจัดเก็บข้อมูล เราจะดำเนินการโดยใช้ JSON.stringify ซึ่งจะแปลงวัตถุ (หรืออาร์เรย์) เป็น JSON:
const myObject = {one: 1, two: 2, three: 3}
// => {one: 1, two: 2, three: 3}
localStorage.setItem("object", JSON.stringify(myObject))
// => undefined
ในการดึงข้อมูล ตอนนี้เราจะแยกวิเคราะห์หลังจากดึงข้อมูลแล้ว ซึ่งจะแปลงจาก JSON เป็นออบเจ็กต์หรืออาร์เรย์ JavaScript ปกติโดยใช้ JSON.parse:
const myNewObject = JSON.parse(localStorage.getItem("object"))
// => undefined
myNewObject
// => {one: 1, two: 2, three: 3}
typeof myNewObject
// => 'object'
