最新的 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(); //用日期时间作为唯一key
var 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; //数据用逗号隔开,拼成字符串,作为value
localStorage.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--) { //从后往前依次取每条localstorage
local_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
来源: http://lib.csdn.net/article/html5/36564