Menyimpan Objek JavaScript di Penyimpanan lokal HTML5 dan Penyimpanan sesi

Bekerja dengan Objek di Penyimpanan Web

Saat bekerja dengan localStorage atau sessionStorage HTML5, pengembang sering mengalami masalah saat mencoba menyimpan objek JavaScript. Tidak seperti tipe data dan array primitif, objek tampaknya dikonversi menjadi string, yang dapat menyebabkan kebingungan dan hasil yang tidak diharapkan.

Memahami cara menyimpan dan mengambil objek dengan benar menggunakan Penyimpanan Web sangat penting bagi banyak aplikasi web. Panduan ini akan mengeksplorasi alasan objek dikonversi menjadi string dan memberikan solusi sederhana untuk memastikan objek Anda disimpan dan diambil dengan benar.

Memerintah	Keterangan
JSON.stringify()	Mengonversi objek atau nilai JavaScript menjadi string JSON, memungkinkan penyimpanan di Penyimpanan lokal atau Penyimpanan sesi.
localStorage.setItem()	Menyimpan pasangan nilai kunci di objek localStorage, memungkinkan data bertahan di seluruh sesi browser.
localStorage.getItem()	Mengambil nilai yang terkait dengan kunci tertentu dari Penyimpanan lokal.
JSON.parse()	Mengurai string JSON dan mengubahnya kembali menjadi objek JavaScript, memungkinkan pengambilan struktur data yang kompleks.
sessionStorage.setItem()	Menyimpan pasangan nilai kunci dalam objek sessionStorage, memungkinkan data bertahan selama durasi sesi halaman.
sessionStorage.getItem()	Mengambil nilai yang terkait dengan kunci tertentu dari sessionStorage.

Menyimpan dan Mengambil Objek secara Efektif di Penyimpanan Web

Dalam JavaScript, Dan adalah objek penyimpanan web yang memungkinkan Anda menyimpan pasangan nilai kunci di browser. Namun, solusi penyimpanan ini hanya mendukung string, yang berarti mencoba menyimpan objek JavaScript secara langsung akan mengakibatkan objek tersebut dikonversi ke representasi string seperti . Untuk menyimpan objek secara efektif, Anda perlu mengonversinya menjadi string JSON menggunakan JSON.stringify(). Metode ini mengambil objek JavaScript dan mengembalikan string JSON, yang dapat disimpan atau .

Untuk mengambil objek yang disimpan, Anda harus mengubah string JSON kembali menjadi objek JavaScript menggunakan . Metode ini mengambil string JSON dan mengembalikan objek JavaScript yang sesuai. Skrip yang diberikan dalam contoh di atas menunjukkan proses ini. Pertama, sebuah objek dibuat dan diubah menjadi string JSON dengan sebelum disimpan di menggunakan localStorage.setItem(). Untuk mengambil objek, string JSON diambil menggunakan dan kemudian diurai kembali menjadi objek JavaScript menggunakan .

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Teknik Tingkat Lanjut untuk Penyimpanan Web

Saat menggunakan HTML5 Dan , pengembang sering kali perlu menyimpan data yang lebih kompleks daripada sekadar string. Meskipun serialisasi dan deserialisasi JSON efektif untuk objek dasar, skenario lebih lanjut mungkin memerlukan pertimbangan tambahan. Misalnya, jika Anda bekerja dengan objek yang sangat bertumpuk atau objek yang berisi metode, Anda memerlukan pendekatan yang lebih canggih. Salah satu teknik umum adalah dengan menggunakan perpustakaan seperti atau circular-json untuk menangani referensi melingkar dan struktur objek yang lebih kompleks.

Perpustakaan ini memperluas standar Dan metode untuk mendukung serialisasi dan deserialisasi objek dengan referensi melingkar, memungkinkan solusi yang lebih kuat untuk menyimpan objek di penyimpanan web. Pertimbangan lainnya adalah kompresi data. Untuk objek besar, Anda bisa menggunakan perpustakaan seperti untuk mengompres data sebelum menyimpannya localStorage atau , mengurangi jumlah ruang yang digunakan. Hal ini khususnya berguna untuk aplikasi yang perlu menyimpan sejumlah besar data sisi klien.

1. Bisakah saya menyimpan fungsi di atau ?
2. Tidak, fungsi tidak dapat disimpan langsung di penyimpanan web. Anda dapat menyimpan kode fungsi sebagai string dan menggunakannya untuk membuatnya kembali, tetapi hal ini umumnya tidak disarankan karena risiko keamanan.
3. Bagaimana cara menangani referensi melingkar pada objek?
4. Gunakan perpustakaan seperti atau yang dirancang untuk menangani referensi melingkar dalam objek JavaScript.
5. Untuk apa batas penyimpanannya ?
6. Batas penyimpanan untuk biasanya berukuran sekitar 5MB, tetapi dapat bervariasi antar browser.
7. Bisakah saya mengompresi data sebelum menyimpannya?
8. Ya, Anda dapat menggunakan perpustakaan seperti untuk mengompresi data Anda sebelum menyimpannya atau .
9. Bagaimana cara menyimpan array objek?
10. Ubah array menjadi string JSON menggunakan sebelum menyimpannya atau .
11. Apakah aman menyimpan data sensitif di dalamnya ?
12. Tidak, tidak aman menyimpan data sensitif karena dapat diakses melalui JavaScript dan dapat disusupi jika situs diserang.
13. Dapatkah saya menggunakan di domain yang berbeda?
14. TIDAK, dibatasi pada asal yang sama, artinya tidak dapat diakses di domain yang berbeda.
15. Apa yang terjadi jika pengguna menghapus data browsernya?
16. Semua data disimpan di Dan akan dihapus jika pengguna menghapus data browsernya.

Menyimpan dan mengambil objek secara efektif di penyimpanan web HTML5 memerlukan konversi objek menjadi string JSON dan kemudian menguraikannya kembali . Metode ini memastikan bahwa data tetap utuh dan dapat digunakan di berbagai sesi browser. Dengan memahami dan memanfaatkan teknik ini, pengembang dapat memanfaatkan Penyimpanan lokal dan Penyimpanan sesi untuk tugas pengelolaan data yang lebih kompleks, sehingga meningkatkan fungsionalitas dan kinerja aplikasi web mereka.