Memahami storan setempat: Membongkar misteri fail misteri ini

Menyahsulit LocalStorage: Apakah fail misteri ini?

Dengan perkembangan Internet, pembangunan web telah menjadi semakin biasa, dan maklumat dan data peribadi orang ramai juga disimpan secara meluas dalam penyemak imbas. Dan salah satu fail misteri ialah LocalStorage. Jadi apakah sebenarnya LocalStorage? Dalam artikel ini, kami akan menguraikan prinsip dan penggunaan LocalStorage dan memberikan contoh kod khusus.

LocalStorage ialah mekanisme storan web yang disediakan oleh penyemak imbas, yang boleh menyimpan dan mendapatkan semula data pasangan nilai kunci pada penyemak imbas. Berbanding dengan kuki tradisional, LocalStorage mempunyai kapasiti storan yang lebih besar (biasanya 5MB) dan tempoh storan yang lebih lama (storan kekal). Tanpa masa tamat tempoh, data LocalStorage akan sentiasa wujud dalam penyemak imbas pengguna dan tidak akan dikosongkan walaupun penyemak imbas ditutup.

LocalStorage sangat mudah digunakan. Kami boleh menggunakan JavaScript untuk mengendalikan LocalStorage, menetapkan data pasangan nilai kunci melalui kaedah setItem(), mendapatkan data melalui kaedah getItem() dan memadamkan data melalui kaedah removeItem(). Berikut ialah beberapa kod contoh asas:

// Tetapkan data LocalStorage
localStorage.setItem('nama', 'David'); console.log(localStorage.getItem('name')); // Output: David
console.log(localStorage.getItem('age')); // Output: 28

// Padamkan data LocalStorage
localStorage.removeItem ('name');
console.log(localStorage.getItem('name')); // Output: null

LocalStorage bukan sahaja boleh menyimpan data jenis rentetan, tetapi juga jenis data asas lain, seperti nombor dan Nilai Boolean menunggu. LocalStorage juga boleh menyimpan data jenis objek, cuma tukar objek ke dalam format JSON. Kod sampel adalah seperti berikut:

//Tetapkan data objek LocalStorage

var pengguna = {

nama: 'David',

umur: 28,

e-mel: 'david@example.com'
};
localStorage.setItem( 'pengguna' , JSON.stringify(pengguna));

// Dapatkan data objek LocalStorage
var storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); Output: David

console.log(storedUser.age); // Output: 28

console.log(storedUser.email); // Output: david@example.com

LocalStorage data disimpan dalam unit nama domain, berbeza LocalStorage data di bawah nama domain adalah bebas. Ini bermakna bahawa dalam penyemak imbas yang sama, halaman web di bawah nama domain yang berbeza tidak boleh berkongsi data LocalStorage. Ini adalah untuk melindungi privasi dan keselamatan pengguna.

Selain tetapan mudah dan mendapatkan data, LocalStorage juga boleh memantau perubahan data. Melalui kaedah addEventListener(), kita boleh menambah pendengar acara perubahan pada LocalStorage Apabila data dalam LocalStorage berubah, acara akan dicetuskan. Kod sampel adalah seperti berikut:

// Pantau perubahan data LocalStorage

window.addEventListener('storage', function(e) {

console.log('LocalStorage data changes:', e.key, e.newValue);

}) ;

//Ubah suai data LocalStorage
localStorage.setItem('name', 'Emily');
//Output konsol: Perubahan data LocalStorage: nama Emily

Ringkasan: LocalStorage ialah mekanisme storan web yang misteri dan berkuasa , yang boleh menyimpan dan mendapatkan semula data pada penyemak imbas. Penggunaan LocalStorage adalah sangat mudah dan data boleh dimanipulasi dengan mudah melalui kaedah setItem(), getItem() dan removeItem(). Data LocalStorage disimpan dalam unit nama domain dan data LocalStorage di bawah nama domain yang berbeza adalah bebas. Perubahan dalam data LocalStorage boleh dipantau melalui kaedah addEventListener(). Penggunaan LocalStorage boleh membantu pembangun menyimpan dan mengurus data dengan lebih mudah serta memberikan pengalaman pengguna yang lebih baik. Saya harap artikel ini akan membantu anda menyahsulit LocalStorage!

Atas ialah kandungan terperinci Memahami storan setempat: Membongkar misteri fail misteri ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!