HTML5 localStorage

#HTML5 LocalStorage


作为一名前端小白，今天第一次接触HTML5的新特性：localStorage，发现非常棒，特地记录下来：


###localStorage和session的区别
>1. cookie能够存储的内容非常有限，最大不能超过4k, localstorage作为html5的新特性，能够支持5M的存储量，能够满足绝大部分前端数据的存储。所以数据量成为了cookie的限制瓶颈。
>2. 再加之cookie并不算一个非常安全的做法，很多浏览器可以禁止cookie的使用。


### localStorage的浏览器支持情况
>除了IE 6~7 对localstorage支持不好之外，其他大部分浏览器的较低版本也能够很好的支持localstorage，而对于IE6和IE7，我们依然可以用cookie进行存储


###  localstorage的用法
1. 写入
* localStorage.name = "wuruifeng"
* localStorage['name'] = "wuruifeng"
* localStorage.setItem('name', 'wuruifeng')
2. 读取
* localStorage.name
* localStorage['name']
* localStorage.getItem('name')
3. 移除
* localStorage.removeItem('name')
* localStorage.clear(); // 删除所有的键值对
4. 其他注意
  * ***在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。***
  * html5还提供了一个key方法，它可以获取localStorage中所有的键值，当你不知道键值对的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>");
}
}
  ```
 
* 存入localStorage的内容其实都是字符串形式的，无论你将一个数组或是一个json类型的内容存入localStorage,其实都是作为字符串存入的。读取后需要对数据进行解析，对于数组需要用array.split(‘,’)
，对于json需要用JSON.parse