【发布时间】：2015-01-05 14:57:33
【问题描述】：
我想在我的 Angular 应用中记录操作。
如果我无法发布，那么我想将项目添加到本地存储中的另一个日志，以便下次发布时我也可以尝试添加这些项目。
完成后，我想尝试发布当前项目。我还想要一个（同步）按钮，它在整个过程中运行，而无需通过操作日志过程。以便用户可以尝试发布他们之前无法发布的所有项目。
我正在考虑这样处理它。 提交时
-将项目添加到本地存储，然后尝试发布。 （以便它首先发布较早的项目）
成功
-从本地存储中删除项目
出错
-将项目保存到本地存储
如下所示，我在实现此工作的道路上走得很远，但是我不确定这是否是解决此问题的最佳方法。
目前我可以发布成功的数据，但不能从本地存储中删除单个项目。
我在下面的代码中添加了一个名为 removeName 的用户服务，因为它当前删除了 _nameLog 而不是对该项目的本地存储引用。
但是当您在codepen demo 中运行代码时，它每次都会发布每个项目，因为我没有成功删除它们？
如何在不删除 _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>
【问题讨论】：
-
请记住，这不适用于 diff。 protocals.. http vs. https（当然，除非你使用某种 iframe shim）
-
嗯，我知道你在做什么，但我不确定你在说什么错误场景。为什么不只使用拦截器来重新排列您的请求。通过这种方式，您将能够根据您遇到的问题针对特定场景回发失败的请求。
-
我认为更好的方法是仅在出现错误时将其添加到本地存储中...这样您就不必继续进行添加/删除..以及使用 $interval 的一些重试功能
-
@jamesemanon 你有什么想法/最佳实践吗？我会认为很多 API 会是 https？
标签： javascript html angularjs local-storage promise