Mengapakah storan setempat tidak boleh menyimpan data dengan betul?

Mengapa localstorage tidak boleh menyimpan data saya seperti biasa?

Dalam pembangunan web, kami selalunya perlu menyimpan data pengguna secara setempat supaya data boleh dimuatkan atau dipulihkan dengan cepat pada kali berikutnya pengguna melawati tapak web. Dalam penyemak imbas, kita boleh menggunakan localStorage untuk mencapai fungsi ini. Walau bagaimanapun, kadangkala kami mendapati bahawa data yang disimpan menggunakan localStorage tidak berfungsi dengan betul. Jadi mengapa ini berlaku?

Sebelum memahami sebab localStorage tidak boleh menyimpan data seperti biasa, kita perlu terlebih dahulu memahami konsep asas dan penggunaan localStorage.

localStorage ialah mekanisme yang disediakan dalam HTML5 untuk menyimpan data dalam pelayar web. Ia menyediakan antara muka simpanan pasangan nilai kunci mudah yang boleh menyimpan data dalam penyemak imbas dalam bentuk rentetan. Di bawah nama domain semasa, data boleh disimpan ke localStorage melalui kaedah localStorage.setItem() dan data yang disimpan boleh diperoleh melalui kaedah localStorage.getItem(). Selain itu, kami juga boleh menggunakan kaedah localStorage.removeItem() untuk memadam data dalam localStorage.

Namun, kadangkala kami mendapati data yang disimpan menggunakan localStorage tidak berfungsi dengan betul. Ini mungkin disebabkan oleh sebab berikut:

1. Kapasiti storan melebihi: Walaupun localStorage boleh menyimpan sejumlah besar data dalam penyemak imbas, ia juga mempunyai had kapasiti. Pelayar yang berbeza mempunyai had kapasiti yang berbeza untuk localStorage Secara umumnya, dalam pelayar yang berbeza, had kapasiti localStorage adalah kira-kira 5MB. Jika had ini melebihi, data tidak boleh disimpan seperti biasa. Oleh itu, apabila menggunakan localStorage untuk menyimpan data, anda perlu memberi perhatian kepada saiz data dan had penyemak imbas untuk mengelakkan melebihi kapasiti.
2. Dasar sekatan storan: Penyemak imbas juga mempunyai beberapa dasar sekatan untuk storan storan setempat. Sebagai contoh, penyemak imbas mungkin menetapkan had tempoh penyimpanan untuk localStorage di bawah nama domain yang sama, iaitu, sesetengah penyemak imbas akan memadamkan data dalam localStorage secara automatik selepas pengguna menutup penyemak imbas. Selain itu, mod privasi penyemak imbas juga boleh menyebabkan localStorage tidak dapat menyimpan data seperti biasa. Oleh itu, apabila menggunakan localStorage, anda perlu mempertimbangkan strategi sekatan ini dan cuba mengelak daripada tidak dapat menyimpan data disebabkan sekatan ini.
3. Tidak padan jenis data: localStorage hanya boleh menyimpan data jenis rentetan. Masalah timbul jika kami cuba menyimpan jenis data lain, seperti objek atau tatasusunan, terus ke dalam localStorage. Sebelum menyimpan, kita perlu menukar data ini kepada rentetan, biasanya menggunakan kaedah JSON.stringify(). Apabila mendapatkan data, kita perlu menukar rentetan kepada jenis asal, biasanya menggunakan kaedah JSON.parse(). Jika kami mengabaikan penukaran jenis ini, data tidak boleh disimpan dan dibaca seperti biasa.

Berikut ialah contoh kod khusus yang menunjukkan cara menggunakan localStorage untuk menyimpan dan membaca data:

// 保存数据到localStorage
let data = {
    name: 'John',
    age: 25
};
localStorage.setItem('userInfo', JSON.stringify(data));

// 从localStorage中读取数据
let savedData = localStorage.getItem('userInfo');
let userData = JSON.parse(savedData);
console.log(userData.name);  // 输出：John
console.log(userData.age);   // 输出：25

Dengan menggunakan localStorage dengan betul dan memberi perhatian kepada masalah di atas yang mungkin menyebabkan data tidak dapat disimpan seperti biasa, kami boleh memastikan bahawa data boleh disimpan dan dibaca secara normal untuk meningkatkan pengalaman pengguna. Pada masa yang sama, anda juga boleh mempertimbangkan untuk menggunakan kaedah penyimpanan data lain, seperti IndexedDB atau WebSQL, untuk menyelesaikan beberapa batasan localStorage.

Atas ialah kandungan terperinci Mengapakah storan setempat tidak boleh menyimpan data dengan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!