Storan web HTML5
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.
localStorage dan sessionStorage
Terdapat dua objek baharu untuk menyimpan data pada klien:
localStorage - penyimpanan data tanpa had masa
sessionStorage - untuk Data storan untuk sesi
Sebelum menggunakan storan web, anda harus menyemak sama ada penyemak imbas menyokong localStorage dan sessionStorage:
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}objek localStorage
Tiada had masa untuk data yang disimpan oleh objek localStorage . Data masih tersedia selepas hari, minggu atau tahun berikutnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>Contoh analisis:
Gunakan key="lastname" dan value="Smith" untuk mencipta pasangan kunci/nilai LocalStorage
Dapatkan nilai dengan nilai kunci " lastname" Kemudian masukkan data ke dalam elemen dengan id="result"
Petua: Pasangan kunci/nilai biasanya disimpan sebagai rentetan dan anda boleh menukar format ini mengikut keperluan anda.
Contoh berikut menunjukkan bilangan kali pengguna mengklik butang Nilai rentetan dalam kod ditukar kepada jenis angka:
<!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">點(diǎn)我</button></p>
<div id="result"></div>
<p>單擊該按鈕查看計(jì)數(shù)器增加.</p>
<p>關(guān)閉瀏覽器選項(xiàng)卡(或窗口),再試一次,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
</body>
</html>objek sessionStorage
SessionStorage. kaedah mengumpul data untuk storan sesi. Data dipadamkan apabila pengguna menutup tetingkap penyemak imbas.
Cara membuat dan mengakses sessionStorage: :
<!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>單擊該按鈕查看計(jì)數(shù)器增加.</p>
<p>關(guān)閉瀏覽器選項(xiàng)卡(或窗口),再試一次,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
</body>
</html>
