本文介绍的是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');
}