Menyimpan Objek JavaScript di Penyimpanan lokal HTML5 dan Penyimpanan sesi

Menyimpan dan Mengambil Objek JavaScript di Penyimpanan lokal

Menggunakan JavaScript dan JSON untuk Penyimpanan lokal

// 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 }

Menyimpan dan Mengambil Objek JavaScript di sessionStorage

Menggunakan JavaScript dan JSON untuk sessionStorage

// 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 }

Pertanyaan Umum tentang Menyimpan Objek di Penyimpanan Web

1. Bisakah saya menyimpan fungsi di localStorage atau sessionStorage?
2. Tidak, fungsi tidak dapat disimpan langsung di penyimpanan web. Anda dapat menyimpan kode fungsi sebagai string dan menggunakannya eval() untuk membuatnya kembali, tetapi hal ini umumnya tidak disarankan karena risiko keamanan.
3. Bagaimana cara menangani referensi melingkar pada objek?
4. Gunakan perpustakaan seperti Flatted atau circular-json yang dirancang untuk menangani referensi melingkar dalam objek JavaScript.
5. Untuk apa batas penyimpanannya localStorage?
6. Batas penyimpanan untuk localStorage biasanya berukuran sekitar 5MB, tetapi dapat bervariasi antar browser.
7. Bisakah saya mengompresi data sebelum menyimpannya?
8. Ya, Anda dapat menggunakan perpustakaan seperti LZ-String untuk mengompresi data Anda sebelum menyimpannya localStorage atau sessionStorage.
9. Bagaimana cara menyimpan array objek?
10. Ubah array menjadi string JSON menggunakan JSON.stringify() sebelum menyimpannya localStorage atau sessionStorage.
11. Apakah aman menyimpan data sensitif di dalamnya localStorage?
12. Tidak, tidak aman menyimpan data sensitif localStorage karena dapat diakses melalui JavaScript dan dapat disusupi jika situs diserang.
13. Dapatkah saya menggunakan localStorage di domain yang berbeda?
14. TIDAK, localStorage 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 localStorage Dan sessionStorage akan dihapus jika pengguna menghapus data browsernya.

Pemikiran Akhir tentang Mengelola Penyimpanan Objek

Menyimpan dan mengambil objek secara efektif di penyimpanan web HTML5 memerlukan konversi objek menjadi string JSON JSON.stringify() dan kemudian menguraikannya kembali JSON.parse(). 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.