HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。正让我们想起了之前的cookie，那么这个本地存储与cookie有什么区别那？ 首先，存储空间大！不同浏览器的标准可能不一样，但一般都在5~10M，比cookie的4k强多了。此外，本地存储的数据不会被发到服务器，与cookie相比，节省带宽，加快响应速度。最后，localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。好像都是优点…

关于兼容性：连IE8都支持了，你还怕什么。

一、localStorage方法

其是只要在chrome的控制台里面打印一下localStorage，就出来了。 其中最常用的是以下几个： length：本地存储数据的个数 setItem(key,value)：向key字段写入value数据 getItem(key)：去key字段的数据 removeItem(key)：移除key字段 clear()：清空该域下的所有数据 key(i)：获取第i个数据的key

二、如何使用HTML5 存储

从之前打印的方法我们也能看出，HTML5 存储是基于键值对的。键是一个字符串，数据可以是任何类型的JavaScript基本数据类型不过需要注意的是，这些数据在存储时实际上也是以字符串保存的。 因此在访问数据时你需要利用parseInt() 或 parseFloat()方法来做数据类型的转换。

我们可以像使用对象一样操作localStorage

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

当本地存储满了，再往里面写数据，将会触发error（这点和cookie的表现不一样），因此一个严谨的脚本应该捕捉写localStorage的错误

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

三、存储JSON数据

JSON数据存储在本地，需调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式。

var json_data = {id:1,name:"1",email:"1"}; 
storage.setItem("json_data",JSON.stringify(json_data));  //写入
var json_data = JSON.parse(storage.getItem("json_data"));  //读取 

四、一些缺点

1.WebStorage API属于一种同步API,所以在保存大数据量或保存对象时的性能不高。 2.缺乏索引,所以在针对大数据量或对象进行搜索时的性能不高。 3.目前主流浏览器均只支持在WebStorage中存储字符串数据,所以当保存对象时必须先将其转换为JSON字符串后进行保存,当获取对象时必须先将取出的字符串后将其还原为对象,所以导致针对对象进行存取操作时的性能不高。