利用HTML5新特性localstorage把用户数据暂时存储在客户端，用于之后上传

来源：互联网发布：新浪网络经纪人编辑：程序博客网时间：2024/05/01 08:21

最新的JS的API中增加了localStorage对象，以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB.所以，这完全是颠覆了Cookie的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。那接下里分别介绍一下localStorage的常用的方法。

localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeItem(key):通过key删除本地数据。
（4）clear():清空数据。

有了这种方法，则可以实现离线存储数据，当网络条件稳定时再上传这些数据，不用像存储文件一样大费周章。对于我目前这个混合型APP项目效果也是非常明显的，如果想要存储进文件里，则需要壳子给写文件的接口，这会造成技术成本变高。所以最终我们选择了localstorage方式。

代码：

1.存入localstorage部分

var local_key=""+dd.getFullYear()+dd.getMonth()+dd.getDate()+dd.getHours()+dd.getMinutes()+dd.getSeconds();//用日期时间作为唯一keyvar local_val=$localStorage.user.USER_CODE+","+$scope.v_khbh+","+$scope.dfhm+","+$scope.thsc+","+$scope.lywjmc+",3,"+$scope.hjlx+",0,0,"+$scope.v_lshs+","+$scope.rq+","+$scope.sj;//数据用逗号隔开，拼成字符串，作为valuelocalStorage.setItem(local_key,local_val);//存入localstorage中

2.取出localstorage部分

function local_do(){//取出localstorage中的数据，符合条件的上传到后台数据库匹配var local_key,local_val;var local_array=new Array();for(i=localStorage.length-1;i>=0;i--){//从后往前依次取每条localstoragelocal_key=localStorage.key(i);if(local_key.length>8 && !isNaN(local_key))//key名大于8位且是数字{local_val=localStorage.getItem(localStorage.key(i));local_array=local_val.split(",");//以逗号隔开的数据放入各自数组$scope.local_ygbh = local_array[0];$scope.local_khbh = local_array[1];$scope.local_dfhm = local_array[2];$scope.local_thsc = local_array[3];$scope.local_lywjm = local_array[4];$scope.local_mtlx = local_array[5];$scope.local_hjlx = local_array[6];$scope.local_kzbs = local_array[7];$scope.local_sfzyth = local_array[8];$scope.local_lshs = local_array[9];$scope.local_rq = local_array[10];$scope.local_sj = local_array[11];//alert(local_val);//POST到数据库myHttp.post({req : {service : 'P9999999',bex_codes : 'insertzxthlskandkhmx',v_ygbh : $scope.local_ygbh,v_khbh : $scope.local_khbh,v_dfhm : $scope.local_dfhm,v_thsc : $scope.local_thsc,v_lywjm : $scope.local_lywjm,v_mtlx : 3,v_hjlx : $scope.local_hjlx,v_kzbs : '0',v_sfzyth : 0,v_lshs : $scope.local_lshs,v_rq : $scope.local_rq,v_sj : $scope.local_sj}}).then(function(data) {var info = data.msg;if (!isNaN(info[0].code)) {// 查询到结果localStorage.removeItem(localStorage.key(i));//删除此条数据 }});};};};

参考链接：

http://www.cnblogs.com/fly_dragon/p/3946012.html

http://blog.sina.com.cn/s/blog_6aaf309f01015k1w.html

0 0