h5的本地存储

什么是本地存储

如下内容从网上抄来的

HTML5 storage提供了一种方式让网站可以把信息存储到你本地的计算机上，并再之后须要的时候进行获取。这个概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后能够经过Javascript来获取这些数据。
简单的说本地存储是HTML5的一部分。更为详细准确的说是本地存储过去是HTML5的标准中的一部分，然后来因为有些工做组的人表示HTML5太庞大了，因而就剥离出来做为一个单独的标准。这听起来好像是把一块馅饼分红不少块目的是为了减小总的卡路里……

为何要用本地存储

其实前面已经提到了，用本地存储有这些好处

• 本地存储和cookie同样提供了把数据保存到本地的能力，页面刷新或者关掉浏览器后，数据依然存在
• 大！虽然不一样浏览器的标准可能不同，主流的通常都在5~10M，比cookie的4k强多了
• 本地存储的数据不会被发到服务器，与cookie相比，节省带宽，加快响应速度

因此，若是须要保存一些数据到用户的浏览器，而这些数据又不须要每一个请求都提交给服务器，不妨考虑使用本地存储。

如何使用

首先，得检查浏览器是否支持本地存储
能够经过检测window下面是否有localStorage字段来判断，可是在IE下，本地文件是不能访问localStorage的，此时localStorage字段为空，因此还要加上判断

'localStorage' in window && window['localStorage']!== null

还有一种状况，假如页面里有id为localStorage的元素，某些浏览器能够经过window.localStorage索引到这个元素-___,-||
为了不你的代码在遇到如此蛋疼的DOM时跪掉，我建议是使用特征检查

window.localStorage && window.localStorage.getItem

肯定浏览器支持localStorage后，咱们就可使用它的接口了，localStorage的使用方法很简单，在chrome的控制台里面打印一下localStorage，就能列出它的所有方法，我相信不少人一看就能明白了。

咱们主要用到的

length：本地存储数据的个数
setItem(key,value)：向key字段写入value数据
getItem(key)：去key字段的数据
removeItem(key)：移除key字段
clear()：清空该域下的全部数据
key(i)：获取第i个数据的key

咱们还能够像操做一个Object同样操做localStorage

var ls=localStorage;
ls['user']='John';
ls.setItem('work','codding');
console.info(ls.length); //2
console.info(ls.user + ' is ' + ls.work); //John is codding
ls['work']='debugging';
console.info(ls.user + ' is ' + ls.work); //John is debugging
delete ls['work'];
for(var i in ls){
  console.info(i + ' : ' + ls.getItem(i)); //user : John
  ls.removeItem(i);
}

惟一不一样的是，对于一个不存在的字段notExist，localStorage.getItem(‘notExist’)会返回null，而localStorage[‘notExist’]则返回undefined。

一些细节

看到这里，你已经掌握了使用本地存储的方法了，下面的是我使用过程当中的一些心得。
本地存储只能存字符串数据，全部数据在写入的时候会被隐式调用toString方法转为字符串，即

var ls=localStorage;
var data={
  user:"John",
  sex:"female"
};
ls.setItem('data',data);
ls.setItem('realData',JSON.stringify(data));
console.info(ls.data); //[object Object]
console.info(ls.realData); //{"user":"John","sex":"female"}

所以，须要存储json之类的数据时，须要本身作转换。
不一样浏览器，分配给本地存储的空间是不同的，譬如chrome是5M。这5M是整个子域共享的，例如http://www.alloyteam.com/2012/04/codejam/和http://www.alloyteam.com/2012/03/css3-checkbox/两个页面同在www.alloyteam.com域下，它们共享同一个本地存储空间，访问到的数据也是同一份；而http://csslib.alloyteam.com/在csslib.alloyteam.com域下，访问的是另外一个存储空间。
一个unicode字符占2个字节（英文和中文同样），因此5M能够存储1024*1024/2=524288个字符，包括key和value。也就是说，localStorage.setItem(‘user’,’John’)向本地存储写进了8个字符（16Byte）。这个网站有一份各类浏览器分配给localStorage存储空间大小的表，你也能够在上面测试当前使用的浏览器支持多大的存储空间，不过它的数据有个问题，它没有考虑到一个unicode字符占2字节，所以它的数据应该所有乘2。
当本地存储满了，再往里面写数据，将会触发error（这点和cookie的表现不同），所以一个严谨的脚本应该捕捉写localStorage的错误

var FIVE_MB=Array(5*1024*512).join('囧');
try{
  localStorage.setItem('x',FIVE_MB);
}catch(e){
  console.info('Oops');
}

当调用localStorage.clear()时，整个域的数据会被清空，包括和当前页面共享一个存储空间的其余页面。

浏览器不支持本地存储怎么办

对于IE6和IE7，有userData，能够提供最多1024kb的空间，虽然userData能够设置有效期，可是仍然存在写满报错的问题，而且userData建立的存储文件不能被枚举，所以须要人为地维护。
另外还可使用内嵌flash控件，使用flash的本地存储空间，flash默认提供100kb，使用更多须要用户受权。
这两种方法的使用成本较高，本文就再也不展开讨论了。

转载自AlloyTeam：http://www.alloyteam.com/2012/04/sth-about-localstorage/