Menyimpan Objek JavaScript dalam HTML5 localStorage dan sessionStorage

Bekerja dengan Objek dalam Storan Web

Apabila bekerja dengan HTML5 localStorage atau sessionStorage, pembangun sering menghadapi masalah apabila cuba menyimpan objek JavaScript. Tidak seperti jenis data dan tatasusunan primitif, objek nampaknya ditukar kepada rentetan, yang boleh membawa kepada kekeliruan dan hasil yang tidak dijangka.

Memahami cara menyimpan dan mendapatkan semula objek dengan betul menggunakan Storan Web adalah penting untuk banyak aplikasi web. Panduan ini akan meneroka sebab objek ditukar kepada rentetan dan menyediakan penyelesaian mudah untuk memastikan objek anda disimpan dan diambil dengan betul.

Perintah	Penerangan
JSON.stringify()	Menukar objek atau nilai JavaScript kepada rentetan JSON, membenarkan penyimpanan dalam localStorage atau sessionStorage.
localStorage.setItem()	Menyimpan pasangan nilai kunci dalam objek localStorage, membenarkan data berterusan merentas sesi penyemak imbas.
localStorage.getItem()	Mendapatkan semula nilai yang dikaitkan dengan kunci yang diberikan daripada localStorage.
JSON.parse()	Menghuraikan rentetan JSON dan menukarnya semula menjadi objek JavaScript, membolehkan mendapatkan semula struktur data yang kompleks.
sessionStorage.setItem()	Menyimpan pasangan nilai kunci dalam objek sessionStorage, membenarkan data berterusan untuk tempoh sesi halaman.
sessionStorage.getItem()	Mendapatkan semula nilai yang dikaitkan dengan kunci yang diberikan daripada sessionStorage.

Menyimpan dan Mendapatkan semula Objek dalam Storan Web dengan Berkesan

Dalam JavaScript, dan ialah objek storan web yang membolehkan anda menyimpan pasangan nilai kunci dalam penyemak imbas. Walau bagaimanapun, penyelesaian storan ini hanya menyokong rentetan, yang bermaksud bahawa percubaan untuk menyimpan objek JavaScript secara langsung akan menyebabkan objek ditukar kepada perwakilan rentetan seperti . Untuk menyimpan objek dengan berkesan, anda perlu menukarnya kepada rentetan JSON menggunakan JSON.stringify(). Kaedah ini mengambil objek JavaScript dan mengembalikan rentetan JSON, yang boleh disimpan dalam atau .

Untuk mendapatkan semula objek yang disimpan, anda mesti menukar semula rentetan JSON kepada objek JavaScript menggunakan . Kaedah ini mengambil rentetan JSON dan mengembalikan objek JavaScript yang sepadan. Skrip yang disediakan dalam contoh di atas menunjukkan proses ini. Pertama, objek dicipta dan ditukar kepada rentetan JSON dengan sebelum disimpan dalam menggunakan localStorage.setItem(). Untuk mendapatkan semula objek, rentetan JSON diambil daripada menggunakan dan kemudian dihuraikan kembali ke dalam 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 Lanjutan untuk Storan Web

Apabila menggunakan HTML5 dan , pembangun selalunya perlu menyimpan data yang lebih kompleks daripada sekadar rentetan. Walaupun pensirilan dan penyahsirian JSON berkesan untuk objek asas, senario yang lebih maju mungkin memerlukan pertimbangan tambahan. Sebagai contoh, jika anda bekerja dengan objek bersarang dalam atau objek yang mengandungi kaedah, anda memerlukan pendekatan yang lebih canggih. Satu teknik yang biasa digunakan ialah menggunakan perpustakaan seperti atau circular-json untuk mengendalikan rujukan bulat dan struktur objek yang lebih kompleks.

Perpustakaan ini memanjangkan standard dan kaedah untuk menyokong pensirilan dan penyahsirilan objek dengan rujukan bulat, membolehkan penyelesaian yang lebih mantap untuk menyimpan objek dalam storan web. Pertimbangan lain ialah pemampatan data. Untuk objek besar, anda boleh menggunakan perpustakaan seperti untuk memampatkan data sebelum menyimpannya localStorage atau , mengurangkan jumlah ruang yang digunakan. Ini amat berguna untuk aplikasi yang perlu menyimpan sejumlah besar data pihak pelanggan.

1. Bolehkah saya menyimpan fungsi dalam atau ?
2. Tidak, fungsi tidak boleh disimpan terus dalam storan web. Anda boleh menyimpan kod fungsi sebagai rentetan dan gunakan untuk menciptanya semula, tetapi ini biasanya tidak disyorkan kerana risiko keselamatan.
3. Bagaimanakah saya mengendalikan rujukan bulat dalam objek?
4. Gunakan perpustakaan seperti atau yang direka untuk mengendalikan rujukan bulat dalam objek JavaScript.
5. Apakah had storan untuk ?
6. Had penyimpanan untuk biasanya sekitar 5MB, tetapi ia boleh berbeza-beza antara penyemak imbas.
7. Bolehkah saya memampatkan data sebelum menyimpannya?
8. Ya, anda boleh menggunakan perpustakaan seperti untuk memampatkan data anda sebelum menyimpannya atau .
9. Bagaimanakah saya boleh menyimpan pelbagai objek?
10. Tukar tatasusunan kepada rentetan JSON menggunakan sebelum menyimpannya atau .
11. Adakah selamat untuk menyimpan data sensitif ?
12. Tidak, tidak selamat untuk menyimpan data sensitif kerana ia boleh diakses melalui JavaScript dan boleh terjejas jika tapak itu diserang.
13. Boleh saya guna merentasi domain yang berbeza?
14. tidak, terhad kepada asal yang sama, bermakna ia tidak boleh diakses merentas domain yang berbeza.
15. Apakah yang berlaku jika pengguna mengosongkan data penyemak imbas mereka?
16. Semua data disimpan dalam dan akan dialih keluar jika pengguna mengosongkan data penyemak imbas mereka.

Menyimpan dan mendapatkan semula objek secara berkesan dalam storan web HTML5 memerlukan penukaran objek kepada rentetan JSON dengan dan kemudian menghuraikannya kembali dengan . Kaedah ini memastikan bahawa data kekal utuh dan boleh digunakan merentas sesi penyemak imbas yang berbeza. Dengan memahami dan menggunakan teknik ini, pembangun boleh memanfaatkan localStorage dan sessionStorage untuk tugas pengurusan data yang lebih kompleks, mempertingkatkan fungsi dan prestasi aplikasi web mereka.