HTML5 web存储，一个比cookie更好的本地存储方式。
什么是html5 Web存储
使用HTML5可以在本地存储用户的浏览器数据。
早些时候，本地存储使用的是cookies.但是Web存储需要更加安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它可以存储大量数据，而不影响网站的性能。
数据以键值对存在，web网页的数据只允许该网页访问使用。
localStorage 和sessionStorage
localStorage ：没有时间限制的数据存储
sessionStorage：针对一个seeeion的灵气存储
在使用web存储前，应检查浏览器是否支持localStorage 和sessionStorage
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
localStorage对象存储的灵气没有时间限制，不会过期。
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
下面的实例记录了用户的点击次数
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).";
sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
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.";
来看效果：
连接点击19次后，看 sessionStorage
再开一个选项卡看sessionStorage: 从图中可以看出，打开新的选项卡后，单击次数显示是1，意味着上一次单击的数并没有被记住。
同样看localStorage，localStorage单击了7次，
再开一个选项卡看效果：单击一次localStorage按钮，记录数显示8，在上一次的基础上加1.
完整的demo:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>LocalStorage</title>
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
function clickCounter() {
if (typeof (Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
$(‘#result‘).html(‘‘);
$(‘#result‘).append(‘<p>‘ + sessionStorage.clickcount + ‘</p>‘);
}
else {
$(‘#result‘).text(‘抱歉您的浏览器不支持本地存储‘);
}
}
function clickCounter2() {
if (typeof (Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
}
else {
localStorage.clickcount = 1;
}
$(‘#result2‘).html(‘‘);
$(‘#result2‘).append(‘<p>‘ + localStorage.clickcount + ‘</p>‘);
}
else {
$(‘#result2‘).text(‘抱歉您的浏览器不支持本地存储‘);
}
}
</script>
</head>
<body>
<div>
<p>
<button onclick="clickCounter()" type="button">sessionStorage查看单击次数</button>
</p>
<div id="result"></div>
<p>单击按钮查看统计次数</p>
</div>
<div>
<p>
<button onclick="clickCounter2()" type="button">localStorage查看单击次数</button>
</p>
<div id="result2"></div>
<p>单击按钮查看统计次数</p>
</div>
</body>
</html>
本节完
时间： 2024-10-09 19:48:04