HTML5本地存储

1.1概述

HTML5存储是基于键值对的。数据存储在一个键里，访问数据时可以根据同样的键获得上次存储的数据。键是一个字符串。而数据则可以是任何类型的JS基本数据类型，包括字符串，Boolean，整数，和浮点数。需要注意的是，这些数据在存储时实际上是以字符串保存的。因此在访问数据时需要做数据类型的转换。

在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage。二者的区别：前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了；二者用法完全相同。

1.2localStorage方法

1.2.1检测浏览器是否支持本地存储的方法。

if(window.localStorage){

alert('ThisbrowsersupportslocalStorage');

}else{

alert('ThisbrowserdoesNOTsupportlocalStorage');

}

1.2.2存储和访问的方法

1、方法一

varfoo="string";

localStorage.setItem("bar",foo);//存储键为bar，值为"string"的一条数据

localStorage.getItem("bar");//访问本地bar的值

2、方法二

可以将localStorage对象当成是关联数组使用(associativemap)。

varfoo="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()方法

例：

varstorage=window.localStorage;

functionshowStorage(){

for(vari=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格式。

例：

vardetails={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]，而不是之前的[objectStorage]，但测试发现getItem()、setItem()等均能使用）。

<metacontent="IE=7"http-equiv="X-UA-Compatible"/>

1.2.6本地存储应用实例

例：一个最简单利用本地存储的计数器

functioncounter(){

varstorage=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.8storage事件——对键值对的改变进行监听

用到的时候再进行总结········