HTML5本地存储

HTML5本地存储

1.1概述
HTML5 存储是基于键值对的。数据存储在一个键里，访问数据时可以根据同样的键获得上次存储的数据。键是一个字符串。而数据则可以是任何类型的JS基本数据类型，包括字符串，Boolean，整数，和浮点数。需要注意的是，这些数据在存储时实际上是以字符串保存的。 因此在访问数据时需要做数据类型的转换。
在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage。二者的区别：前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了；二者用法完全相同。
1.2 localStorage方法
1.2.1检测浏览器是否支持本地存储的方法。
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
1.2.2存储和访问的方法
1、方法一
var foo="string";
localStorage.setItem("bar",foo);//存储键为bar，值为"string"的一条数据
localStorage.getItem("bar");//访问本地bar的值
2、方法二
可以将localStorage对象当成是关联数组使用(associative map)。
var foo="string";
localStorage["bar"]=foo;
localStorage.bar="new_string";//设置bar为"new_string"，覆盖上面的值
localStorage["bar"];
localStorage.bar;
上述两种方法是等价的。
注意：调用setItem 时如果使用一个已经存在的键，将会直接覆盖掉该键上保存的值。
调用getItem时如果传入一个不存在的键，则会返回一个null，不会抛出异常。
1.2.3删除某个键和清空整个存储区域(删除所有的键和值)的方法
清除某个键值对使用removeItem()，一次性清除所有的键值对则使用clear()。
注意：如果removeItem传入一个不存在的key则无操作，不会有异常。
1.2.4本地存储内容未知——使用key()方法
例：
var storage=window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
document.write(storage.key(i)+":"+storage.getItem(storage.key(i))+"<br>");
//key(i)获得相应的键，再用getItem()方法获得对应的值
}
}
注意：如果向key方法传入了一个越界的值（不在0到length-1 之间），则该方法返回null。
1.2.5本地存储的内容
HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取时，需要进行类型的转换。
1、存储内容为“字符串”
存储内容为“字符串”时，可以直接取用，不必转换。
localStorage.setItem("a","张雷");
localStorage.getItem("a");//返回值为"张雷"
2、存储内容为“数字”
    存储内容为数值型时，需要用paraInt和paraFloat进行转换。
整型
localStorage.setItem("b",5);
localStorage.getItem("b");//"5"
parseInt(localStorage.getItem("b")); //返回值为5
parseFloat(localStorage.getItem("b"));//返回值为5
浮点型
localStorage.setItem("c",5.12);
parseInt(localStorage.getItem("c"));//返回值为5
parseFloat(localStorage.getItem("c"));//返回值为5.12
3、存储内容为“布尔值/对象(哈希或者数组)”
存储内容为“布尔值/对象(哈希或者数组)”时，使用json格式。向本地存储时，调用JSON.stringify()将其转为字符串。读取时，调用JSON.parse()将字符串转为json格式。
例：
var details={author:"isaac","description":"fresheggs","rating":100};
storage.setItem("details",JSON.stringify(details));
details=JSON.parse(storage.getItem("details"));
JSON对象在支持localStorage的浏览器上基本都支持，需要注意的是IE8，它支持JSON，但如果添加了如下的兼容模式代码，切到IE7模式就不行了（此时依然支持localStorage，虽然显示window.localStorage是[object]，而不是之前的[object Storage]，但测试发现getItem()、setItem()等均能使用）。
<meta content="IE=7" http-equiv="X-UA-Compatible"/>
1.2.6本地存储应用实例
例：一个最简单利用本地存储的计数器
function counter(){
var storage=window.localStorage;
if(!storage.getItem("pageLoadCount")){
storage.setItem("pageLoadCount",0);
}
storage.pageLoadCount=parseInt(storage.getItem("pageLoadCount"))+1;
document.getElementById("count").innerHTML=storage.pageLoadCount;
}
不断刷新就能看到数字在一点点上涨。
1.2.7数据存储异常处理
try{
localStorage.setItem(key,value);
}catch(oException){
if(oException.name=='QuotaExceededError'){
console.log('超出本地存储限额！');
//如果历史信息不重要了，可清空后再设置
localStorage.clear();
localStorage.setItem(key,value);
}
}
1.2.8 storage事件——对键值对的改变进行监听
用到的时候再进行总结········