ak8*_*k85 6 javascript html5 local-storage promise angularjs
我想在我的角度应用程序中记录操作.
如果我无法发布,那么我想将该项目添加到本地存储中的另一个日志,以便下次发布时我也可以尝试添加这些项目.
一旦完成,我想尝试发布当前项目.我还希望有一个(同步)按钮,它可以在不进行操作日志过程的情况下运行整个过程.这样用户就可以尝试发布他们之前无法发布的所有项目.
我想这样接近它.提交
-add项目到本地存储,然后尝试发布.(以便先发布先前的项目)
成功
- 从本地存储中删除项目
出错了
- 将项目保存到本地存储
我是一个公平的方式让这个工作如下所示,但我不知道这是否是最好的方法来解决这个问题.
目前我可以发布有关成功的数据,但不会从本地存储中删除单个项目.
我在一个名为removeName的userService中添加了我在下面的代码中注释掉的内容,因为它当前删除了_nameLog而不是该项的本地存储引用.
但是当您在codepen演示中运行代码时,它每次都会发布每个项目,因为我没有在成功时删除它们？
如何在不删除_namelog的情况下删除成功后的本地存储项(因为这需要保留在ng-repeat中),还是有不同的方式我应该接近这个？
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="updatedname">
<input type="button" value="Change name" ng-click="changeName(updatedname)"/>
<br/>
Hello, {{name}}!
<ul>
<li ng-repeat="name in nameLog">{{name.value}} - {{name.time}}</li>
</ul>
<input type="button" value="sync" ng-click="syncPosts()"/>
</div>
</body>
<script>
var myApp = angular.module('myApp',[]);
myApp.factory('UserService', ['$window','$http', function($window,$http) {
var _nameLog = [];
var userService = {};
userService.name = "John";
userService.ChangeName = function (value) {
userService.name = value;
};
userService.logName = function (value) {
_nameLog.push ({
"value":value,
"time" :Date.now()
});
};
userService.removeName = function (value) {
return delete _nameLog[0];
};
userService.getNameLog = function(){
return _nameLog;
};
userService.setLS = function(key, value) {
$window.localStorage[key] = value;
},
userService.getLS = function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
};
userService.setObject = function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
};
userService.getObject = function(key) {
return JSON.parse($window.localStorage[key] || '{}');
};
userService.testPost = function(myVal,myTime) {
return $http.post('http://jsonplaceholder.typicode.com/posts', {title:myVal,body:myTime,userId: 1});
};
return userService;
}]);
function MyCtrl($scope, UserService) {
$scope.name = UserService.name;
$scope.updatedname="";
$scope.changeName=function(data){
$scope.updateServiceName(data);
}
$scope.updateServiceName = function(name){
UserService.ChangeName(name);
UserService.logName(name);
$scope.name = UserService.name;
$scope.nameLog = UserService.getNameLog();
UserService.setLS('name', JSON.stringify($scope.nameLog));
getPosts();
}
$scope.syncPosts = function(){
getPosts();
}
function testPost(myVal,myTime) {
UserService.testPost(myVal,myTime)
.success(function(data, status, headers, config) {
console.log('success');
console.log(data);
//UserService.removeName();
})
.error(function(data, status, headers, config) {
console.log('error');
});
}
function getPosts(){
getObj = UserService.getObject('name');
for (var k in getObj) {
var myVal = getObj[k].value;
var myTime = getObj[k].time;
testPost(myVal,myTime);
console.log(getObj[k].value);
}
}
}
</script>
“如何在不删除 _namelog 的情况下成功删除本地存储项目”
您的设计存在一些问题：
1) 对于本地存储 key=name ，该值是一个数组。在您的 testPost 中，您不知道要发布哪个数组项。如果您知道可以从 LS 检索该数组，则可以从数组中拼接该元素并将其字符串化回 LS。
2) 需要太多的 String 到 JSON 来回。
因此，我的建议是遵循诸如 name-0、name-1、name-2 之类的键命名方案，并将每个日志条目存储为单独的键。在 LS 中保留一个计数器。添加日志条目时增加此值。然后在你的 testPost 中你可以删除那个键。k作为参数从 getPosts传递给 testPost。
解决方案在plunkr 解决方案中
<body ng-app="myApp">
<div ng-controller="MyCtrl as ctrl">
<input type="text" ng-model="updatedname">
<input type="button" value="Change name" ng-click="changeName(updatedname)"/>
<br/>
Hello, {{name}}!
<ul>
<li ng-repeat="name in nameLog">{{name.value}} - {{name.time}}</li>
</ul>
<input type="button" value="sync" ng-click="syncPosts()"/>
</div>
</body>
angular.module('myApp', [])
.factory('UserService', ['$window', '$http',
function($window, $http) {
var _nameLog = [];
var userService = {};
userService.name = "John";
userService.ChangeName = function(value) {
userService.name = value;
};
userService.logName = function(value) {
var logCount = userService.getLS('count', undefined);
if (angular.isUndefined(logCount)) {
logCount = -1;//so that this gets incremented to 0
}
var obj = {
"value": value,
"time": Date.now()
};
logCount++;
_nameLog.push(obj);
this.setObject('count',logCount);
this.setObject('name#'+logCount, obj);
};
userService.removeName = function(value) {
return delete _nameLog[0];
};
userService.getNameLog = function() {
return _nameLog;
};
userService.setLS = function(key, value) {
$window.localStorage[key] = value;
},
userService.getLS = function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
};
userService.deleteLS = function(key) {
return $window.localStorage.removeItem(key);
};
userService.setObject = function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
};
userService.getObject = function(key) {
return JSON.parse($window.localStorage[key] || '{}');
};
userService.testPost = function(myVal, myTime) {
return $http.post('http://jsonplaceholder.typicode.com/posts', {
title: myVal,
body: myTime,
userId: 1
});
};
return userService;
}
])
.controller('MyCtrl', ['$scope', 'UserService',
function($scope, UserService) {
$scope.name = UserService.name;
$scope.updatedname = "";
$scope.changeName = function(data) {
$scope.updateServiceName(data);
}
$scope.updateServiceName = function(name) {
UserService.ChangeName(name);
UserService.logName(name);
$scope.name = UserService.name;
$scope.nameLog = UserService.getNameLog();
//$scope.getPosts();
}
$scope.syncPosts = function() {
$scope.getPosts();
}
$scope.testPost = function(myVal, myTime, k) {
UserService.testPost(myVal, myTime)
.success(function(data, status, headers, config) {
console.log('success');
console.log(data);
//UserService.removeName();
UserService.deleteLS('name#'+k);
})
.error(function(data, status, headers, config) {
console.log('error');
});
}
$scope.getPosts = function() {
var logCount = UserService.getLS('count', undefined);
if (angular.isUndefined(logCount)) {
return;//there is nothing in log
}
for(var k = 0 ; k <= logCount ; k++) {
var getObj = UserService.getObject('name#'+k);
var myVal = getObj.value;
var myTime = getObj.time;
$scope.testPost(myVal, myTime, k);
console.log(getObj.value);
}
}
}
]);
| 归档时间： |
|
| 查看次数： |
1985 次 |
| 最近记录： |