H5 本地存储localStorage

本文介绍的是localStorage的存储方式，这是h5的一个新技术，使用它很方便在客户端存储数据，它的优点是：

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

它的缺点是：

① localstorage在隐私模式下不可读取
② localstorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）
③ localstorage不能被爬虫爬取，不要用它完全取代URL传参

使用方式如下：
首页你需要检测window下是否有localStorage字段，在IE下，本地文件是不能被访问的，则字段为空，需要加上判断：

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

确定浏览器支持localStorage后，我们就可以使用了，使用方式非常简单，只需几行代码进行储存：

// 使用angularJs请求数据
$http.get("http://www.pinshe.org/v1/admin_member.a?wcid=" + $scope.wcid).success(function(response) {
    $scope.member = response.body;
    if (localStorage.getItem("loginDic") == null) {
        // 存储
        localStorage.setItem("loginDic", JSON.stringify(response.body));
        // 读取
        var sd = eval(("("+localStorage.getItem("loginDic")+")"));
        console.log(sd);
    }
});

以上注意两点：
1.本地存储只支持字符串存储，将整个json使用JSON.stringify()转化
2.读取到的文本是json字符串，需要通过eval(("("+jsonString+")"))来进行解析成model对象

主要用到的函数有：

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

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

最后：

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

try{
  localStorage.setItem("x","xxx");
}catch(e){
  console.info('Oops');
}