Rumah > hujung hadapan web > html tutorial > Mendedahkan ciri misteri penyimpanan sesi: Mendedahkan kegunaan tersembunyinya

Mendedahkan ciri misteri penyimpanan sesi: Mendedahkan kegunaan tersembunyinya

WBOY
Lepaskan: 2024-01-13 12:36:06
asal
888 orang telah melayarinya

Mendedahkan ciri misteri penyimpanan sesi: Mendedahkan kegunaan tersembunyinya

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>
Salin selepas log masuk

Kod JavaScript:

function saveData() {
   var inputValue = document.getElementById('inputValue').value;
   sessionStorage.setItem('data', inputValue);
   location.href = "//m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6";
}

function loadData() {
   var data = sessionStorage.getItem('data');
   alert(data);
}
Salin selepas log masuk

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 //m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6. Dalam halaman //m.sbmmt.com/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="//m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6">页面跳转</a>
</body>
</html>
Salin selepas log masuk

Kod JavaScript:

var params = {
   name: 'Jack',
   age: 20
};
sessionStorage.setItem('params', JSON.stringify(params));
Salin selepas log masuk

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 //m.sbmmt.com/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); // 输出:20
Salin selepas log masuk

Dengan 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan