首先我们来思考几个问题:
1.什么是web存储?
2.h5引入web存储的原因?
3.web存储的方式有哪些?
使用html5在本地存储用户的浏览数据,之前采用的cookie的形式,但是cookie存储的数据量少而且效率底,进而引入了web存储,客户端存储数据的方式有两种:localStorage,永久性存储,除非自己删除,sessionStorage,关闭浏览器之后就会清空。
localStorage
常用的可使用的api:
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
几个api的使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined"){
localStorage.sitename="测试";
localStorage.setItem("test","测试");
var res=localStorage.getItem('test');
document.getElementById("result").innerHTML=res;
localStorage.removeItem("test");
//localStorage.clear();
document.getElementById("result").innerHTML+="<br/>"+localStorage.key(2);
}else{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
}
</script>
</body>
</html>
运行的结果:
查看storage
chorme浏览器下打开开发工具(F12),找到application,然后选择它就可以看到storage,你可以在这里进行数据的清除。
sessionStorage
关于sessionStorage和localStorage使用api是相同的,只不过它是临时存储,关闭浏览器就会自动清除。
计数的例子:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口,然后再试一次,计数器已经重置了。</p>
</body>
</html>