Cara Menyimpan Objek dan Array Menggunakan localStorage di JavaScript

Penggunaan localStorage berguna untuk menyimpan informasi melalui penyegaran halaman, namun dapat menyebabkan beberapa kesalahan tanpa memahami cara penyimpanan data. localStorage hanya menyimpan data sebagai string, jadi saat Anda menyimpan sebagian data, seperti angka localStorage.setItem("price", 1.20), angka tersebut diurai sebagai string sebelum nilainya disimpan. Untuk menunjukkannya, saya akan mencoba memasukkannya ke konsol browser:

localStorage.setItem("price", 1.20)
// => undefined
const price = localStorage.getItem("price")
// => '1.2'
typeof price
// => 'string'

Saat mencoba menyimpan objek (atau array), masalah yang sama terjadi.

localStorage.setItem("object", {one: 1, two: 2, three: 3})
// => undefined
localStorage.getItem("object")
// => '[object Object]'

Untuk mengatasi ini, kita perlu mengonversi objek menjadi JSON saat menyimpannya di localStorage, karena JSON adalah data yang disimpan sebagai string. Kita juga perlu mengonversinya dari JSON saat mengambilnya dari localStorage.

Untuk menyimpan data, kita akan melakukannya menggunakan JSON.stringify, yang akan mengubah objek (atau array) menjadi JSON:

const myObject = {one: 1, two: 2, three: 3}
// => {one: 1, two: 2, three: 3}
localStorage.setItem("object", JSON.stringify(myObject))
// => undefined

Untuk mengambil data, sekarang kita akan menguraikannya setelah mengambilnya, yang akan mengubahnya dari JSON menjadi objek atau array JavaScript normal menggunakan JSON.parse:

const myNewObject = JSON.parse(localStorage.getItem("object"))
// => undefined
myNewObject
// => {one: 1, two: 2, three: 3}
typeof myNewObject
// => 'object'