Membandingkan storan sesi dan storan setempat: Perbandingan kaedah storan data bahagian hadapan

sessionStorage vs localStorage: Membandingkan dua kaedah storan data bahagian hadapan, contoh kod

Dalam pembangunan aplikasi web moden, storan data merupakan isu utama. Untuk memenuhi keperluan yang berbeza, pembangun bahagian hadapan sering menggunakan kaedah penyimpanan data yang berbeza. Dalam penyemak imbas web, sessionStorage dan localStorage ialah dua kaedah penyimpanan data bahagian hadapan yang biasa digunakan.

sessionStorage dan localStorage ialah dua kaedah penyimpanan data yang disediakan oleh HTML5 Kedua-duanya boleh menyimpan data dalam penyemak imbas untuk kegunaan seterusnya. Walau bagaimanapun, terdapat beberapa perbezaan penting antara mereka.

Pertama sekali, sessionStorage ialah kaedah storan berterusan peringkat sesi. Ia hanya sah dalam tetingkap sesi semasa, iaitu, apabila pengguna menutup tetingkap, data akan dikosongkan. Ini bermakna data yang disimpan dalam sessionStorage hanya tersedia dalam tetingkap semasa dan akan hilang apabila pengguna membuka semula tapak web. Kaedah storan ini sesuai untuk menyimpan data sementara, seperti pemilihan sementara atau status pengguna di tapak web.

Berikut ialah contoh kod menggunakan sessionStorage:

// 将数据存储到sessionStorage
sessionStorage.setItem('username', 'John');

// 从sessionStorage读取数据
var username = sessionStorage.getItem('username');
console.log(username);  // 输出：John

// 从sessionStorage中移除数据
sessionStorage.removeItem('username');

// 清空sessionStorage中的所有数据
sessionStorage.clear();

Sebaliknya, localStorage ialah kaedah storan berterusan dan data boleh disimpan dalam penyemak imbas untuk masa yang lama. Tidak seperti sessionStorage, data yang disimpan dalam localStorage kekal sah selepas pengguna menutup tetingkap atau membuka semula tapak web. Ini menjadikan localStorage ideal untuk menyimpan tetapan peribadi pengguna dan data konfigurasi berterusan.

Berikut ialah contoh kod menggunakan localStorage:

// 将数据存储到localStorage
localStorage.setItem('theme', 'dark');

// 从localStorage读取数据
var theme = localStorage.getItem('theme');
console.log(theme);  // 输出：dark

// 从localStorage中移除数据
localStorage.removeItem('theme');

// 清空localStorage中的所有数据
localStorage.clear();

Selain kegigihannya, terdapat beberapa perbezaan lain antara sessionStorage dan localStorage.

Pertama sekali, sessionStorage dan localStorage kedua-duanya berdasarkan storan pasangan nilai kunci. Dan mereka hanya boleh menyimpan data dalam format rentetan. Jika anda perlu menyimpan jenis data lain, anda perlu menukar data kepada rentetan dahulu, dan kemudian menghuraikannya dengan sewajarnya apabila membaca.

Kedua, skop kedua-duanya berbeza. sessionStorage adalah berdasarkan tetingkap penyemak imbas, dan setiap tetingkap mempunyai sessionStorage tersendiri. LocalStorage adalah berdasarkan nama domain dan semua tetingkap di bawah nama domain yang sama berkongsi localStorage.

Akhir sekali, memandangkan localStorage ialah kaedah storan yang berterusan, kapasiti storannya biasanya lebih besar daripada sessionStorage. Kapasiti storan sessionStorage biasanya sekitar 5MB, manakala kapasiti storan localStorage boleh mencapai 10MB atau lebih.

Ringkasnya, sessionStorage dan localStorage ialah dua kaedah storan data bahagian hadapan yang biasa digunakan. Menggunakan kedua-dua kaedah ini atas permintaan boleh membantu pembangun mencapai storan dan penghantaran data yang lebih fleksibel dan cekap. Kaedah storan yang mana untuk digunakan perlu dipilih berdasarkan keperluan khusus untuk memenuhi keperluan aplikasi dengan lebih baik.

Atas ialah kandungan terperinci Membandingkan storan sesi dan storan setempat: Perbandingan kaedah storan data bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!