Storan web HTML5
Storan web HTML5, kaedah storan tempatan yang lebih baik daripada kuki.
Apakah Storan Web HTML5?
Menggunakan HTML5, anda boleh menyimpan data penyemakan imbas pengguna secara setempat.
Terdahulu, storan tempatan menggunakan kuki. Tetapi storan Web perlu lebih selamat dan cepat Data tidak akan disimpan pada pelayan, tetapi data hanya akan digunakan apabila pengguna meminta data tapak web Ia juga boleh menyimpan sejumlah besar data tanpa menjejaskan prestasi laman web.
Data wujud dalam pasangan kunci/nilai, dan data halaman web hanya boleh diakses dan digunakan oleh halaman web tersebut.
Sokongan penyemak imbas
Internet Explorer 8+, Firefox, Opera, Chrome dan Safari menyokong storan Web.
Nota: Internet Explorer 7 dan versi IE terdahulu tidak menyokong storan web
localStorage dan sessionStorage
Terdapat dua objek baharu. untuk menyimpan data pada klien:
localStorage - storan data tanpa had masa
sessionStorage - storan data untuk sesi
Sebelum menggunakan storan web, anda harus menyemak sama ada penyemak imbas menyokong localStorage dan sessionStorage:
{
// Ya! localStorage dan sessionStorage sokongan!
// Sesetengah kod.....
}
lain
{
// Maaf! sokongan storan..
}
objek localStorage
Data yang disimpan oleh objek localStorage tidak mempunyai had masa. Data masih tersedia selepas hari, minggu atau tahun berikutnya.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Contoh analisis:
Gunakan key="lastname" dan value="Smith" untuk mencipta kunci/nilai pasangan localStorage
-
mendapatkan semula Nilai dengan nilai kunci "nama keluarga" kemudian memasukkan data ke dalam elemen dengan id="hasil"
Petua: Pasangan kunci/nilai biasanya disimpan sebagai rentetan, Anda boleh menukar format ini mengikut keperluan anda.
Contoh berikut menunjukkan bilangan kali pengguna mengklik butang. Tukar nilai rentetan dalam kod kepada jenis angka:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>Run Instance»
Klik "Run Butang Instance" " untuk melihat contoh dalam talian
objek sessionStorage
Kaedah sessionStorage menyimpan data untuk sesi. Data dipadamkan apabila pengguna menutup tetingkap penyemak imbas.
Cara membuat dan mengakses sessionStorage: :
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>Run Instance»
Klik butang "Jalankan contoh" untuk melihat kejadian dalam talian
