Rumah >hujung hadapan web >html tutorial >Mendedahkan ciri misteri penyimpanan sesi: Mendedahkan kegunaan tersembunyinya
Mendedahkan ciri misteri penyimpanan sesi: Mendedahkan kegunaan tersembunyinya
- WBOYasal
- 2024-01-13 12:36:06904semak imbas
Fungsi rahsia SessionStorage didedahkan: untuk memahami kegunaan tersembunyinya, contoh kod khusus diperlukan
Pengenalan:
Dalam pembangunan web, kami sering menggunakan localStorage untuk menyimpan data, tetapi adakah anda tahu bahawa terdapat API yang serupa? sessionStorage? sessionStorage dan localStorage sangat serupa, tetapi terdapat beberapa perbezaan fungsi. Artikel ini akan mendedahkan kegunaan tersembunyi bagi sessionStorage dan membantu anda memahami ciri dan penggunaannya dengan lebih baik melalui contoh kod tertentu.
Apakah sessionStorage?
sessionStorage ialah sebahagian daripada API Storan Web dan digunakan untuk menyimpan data peringkat sesi dalam pelayar web. Ia adalah mekanisme storan sementara Data hanya sah semasa sesi semasa Apabila sesi tamat, data akan dikosongkan secara automatik. Jadi, jika anda perlu mengekalkan data apabila halaman web dimuat semula atau dibuka semula, anda harus menggunakan localStorage dan bukannya sessionStorage.
Penggunaan tersembunyi: perkongsian data
sessionStorage tidak terhad kepada halaman semasa, tetapi juga boleh berkongsi data antara halaman berbeza dalam penyemak imbas yang sama. Ini berguna untuk aplikasi yang memerlukan komunikasi data merentas berbilang halaman. Berikut menggunakan contoh kod khusus untuk menggambarkan penggunaan ini:
Kod HTML:
<!DOCTYPE html> <html> <body> <input type="text" id="inputValue" /> <button onclick="saveData()">保存数据</button> <button onclick="loadData()">加载数据</button> </body> </html>
Kod JavaScript:
function saveData() {
var inputValue = document.getElementById('inputValue').value;
sessionStorage.setItem('data', inputValue);
location.href = "https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6";
}
function loadData() {
var data = sessionStorage.getItem('data');
alert(data);
}Dalam kod di atas, terdapat kotak input dan dua butang pada halaman selepas mengklik "Simpan Data". butang , akan menyimpan nilai dalam kotak input ke sessionStorage dan melompat ke halaman lain https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6. Dalam halaman https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6, klik butang "Muat Data", data yang disimpan di halaman pertama akan dibaca dari sessionStorage dan dipaparkan dalam pop timbul.
Penggunaan tersembunyi dua: Lulus parameter halaman
Selain berkongsi data, sessionStorage juga boleh digunakan sebagai cara untuk lulus parameter. Biasanya kami menggunakan parameter pertanyaan URL untuk menghantar parameter, tetapi ini akan mendedahkan nilai parameter. Menggunakan sessionStorage untuk menghantar parameter boleh memastikan keselamatan data sambil menjadi lebih fleksibel dan mudah. Contoh kod berikut menunjukkan cara menggunakan sessionStorage untuk menghantar parameter:
Kod HTML:
<!DOCTYPE html> <html> <body> <a href="https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6">页面跳转</a> </body> </html>
Kod JavaScript:
var params = {
name: 'Jack',
age: 20
};
sessionStorage.setItem('params', JSON.stringify(params));Dalam kod di atas, selepas mengklik "Page Jump", halaman yang mengandungi kedua-dua nama dan umur akan menjadi Param objek parameter disimpan ke sessionStorage dalam bentuk rentetan JSON. Dalam halaman https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6, parameter boleh dibaca dengan cara berikut:
Kod JavaScript:
var params = JSON.parse(sessionStorage.getItem('params'));
console.log(params.name); // 输出：Jack
console.log(params.age); // 输出：20Dengan menggunakan sessionStorage untuk lulus parameter, kita boleh melindungi keselamatan dengan lebih baik parameter, dan Mengambil kira kecekapan dan fleksibiliti penghantaran data.
Kesimpulan:
Artikel ini mendedahkan dua kegunaan tersembunyi bagi sessionStorage: berkongsi data dan parameter halaman, dan menerangkannya secara terperinci melalui contoh kod. Walaupun senario penggunaan sessionStorage agak sempit, ia boleh memberikan bantuan besar dalam senario aplikasi tertentu. Saya harap artikel ini dapat membantu anda memahami dan menggunakan sessionStorage dengan lebih baik dan terus meningkatkan keupayaan pembangunan web anda.
Atas ialah kandungan terperinci Mendedahkan ciri misteri penyimpanan sesi: Mendedahkan kegunaan tersembunyinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!