html5 存储篇(一)
localStorage 和 sessionStorage
localStorage 与 sessionStorage的相同点:
(1)、都是用于客户端存储的技术,相对于传统的cookie更有一定的优势,他们相对于cookie 大约 4k 左右的储存量(并且每个网站的设置的cookie数量是有限的,并且各个浏览器的限制数目并不相同),储存量大约有 5M 吧。
(2)、都以键值对的形式储存数据,具有相似的API。操作起来相似,且容易。
clear( ) : 删除所有的值。
getItem( name ) : 根据指定的名字name获取对应的值。
key( index ) : 获得 index 位置处的值得名字。
removeItem( name ) : 删除由 name 指定的名值对。
setItme( name, value ) : 为指定的name设置一个对应的值。
localStorage 与 sessionStorage的不同点:
localStorage 一旦设置便会永久的保存在客户端浏览器上,除非手动的删除。
sessionStorage在这方面如同服务端的session,即关闭浏览器,数据就会自动删除掉。因此在选择这两种储存时,应该考虑具体的应用场景来使用。
具体使用:
首先现已下面的代码检测一下您的浏览器是否支持 localStorage 对象。
<script type="text/javascript">
if(typeof window.localStorage == 'undefined') {
alert('您的浏览器不支持localStorage!');
} else {
alert('OK');
}
</script>
下面我们来具体走一遍API吧,由于他们差不多这里我们将以localStorage为例来说明了。。
//设置localStorage
var localStorage = window.localStorage;
localStorage.setItem("name","Lee");
localStorage.setItem("age",27);
![](https://images0.cnblogs.com/blog2015/685629/201505/211515586509228.png)
//删除localStorage
var localStorage = window.localStorage;
localStorage.removeItem("name");
![](https://images0.cnblogs.com/blog2015/685629/201505/211516394794002.png)
//获取localStorage中的值
var localStorage = window.localStorage;
console.log(localStorage.getItem("age"));
![](https://images0.cnblogs.com/blog2015/685629/201505/211517187443732.png)
//获取localStorage中的键值
var localStorage = window.localStorage;
console.log(localStorage.key(0)); //键值是以0开始的。
![](https://images0.cnblogs.com/blog2015/685629/201505/211518093852469.png)
//删除localStorage中全部键值对。
var localStorage = window.localStorage;
localStorage.setItem("name","Lee");
localStorage.clear();
alert(localStorage.getItem("name")); //null
![](https://images0.cnblogs.com/blog2015/685629/201505/211519084799655.png)
![](https://images0.cnblogs.com/blog2015/685629/201505/211518515721757.png)