我想在我的 Angular 应用程序中记录操作。
如果我无法发布，那么我想将该项目添加到本地存储中的另一个日志，以便下次发布时我也可以尝试添加这些项目。
完成此操作后，我想尝试发布当前项目。我还想要一个(同步)按钮，它在整个过程中运行而不通过操作日志过程。这样用户就可以尝试发布他们之前无法发布的所有项目。
我正在考虑这样处理它。 提交时
-将项目添加到本地存储，然后尝试发布。 (以便它首先发布较早的项目)
成功了
-从本地存储中删除项目
错误
-将项目保存到本地存储
如下图所示，我正在努力实现这一目标，但我不确定这是否是解决此问题的最佳方式。
目前我可以发布成功的数据，但不能从本地存储中删除单个项目。
我添加了一个名为 removeName 的 userService，我在下面的代码中将其注释掉了，因为它当前删除的是 _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>
最佳答案
"How can I remove the local storage item on success without removing the _namelog "
您的设计存在一些问题:
1) 对于本地存储 key=name value 是一个数组。在您的 testPost 中，您不知道要发布的是哪个数组项。如果您知道可以从 LS 检索该数组，则从数组中拼接该元素并将其字符串化回 LS。
2) 来回需要太多的 String 和 JSON。
因此，我的建议是遵循 name-0、name-1、name-2 等 key 命名方案，并将每个日志条目存储为单独的 key 。在 LS 中保留一个计数器。添加日志条目时增加此值。然后在你的 testPost 中你可以删除那个键。将 k 作为参数从 getPosts 传递给 testPost。
解决方案在 plunkr solution 中
<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);
}
}
}
]);
关于javascript - 具有 promise 和本地存储的 Angular JS 日志记录数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26824597/