javascript - tag - Datos de registro de JS angulares con promesas y almacenamiento local
getelementsbytagname jquery (2)
Supongo que si está utilizando el almacenamiento local para guardar nombres que no se han sincronizado, es porque quiere asegurarse de que el usuario no se sincronice antes de que cierren su navegador (posiblemente porque no tienen conexión a Internet). en ese momento), la próxima vez que inicien una sesión, pueden intentar volver a sincronizar esos nombres (con suerte cuando tengan una conexión a Internet). Este tipo de técnica es muy popular entre las aplicaciones móviles, ya que entran y salen de la conexión a Internet todo el tiempo.
Si este es el caso, es importante tener en cuenta que un usuario podría tener nombres esperando para sincronizarse de una sesión anterior, y querrá asegurarse de que esos nombres se sincronicen con los nuevos nombres agregados de la sesión actual.
La solución más fácil para este escenario sería suponer que todos los nombres en el almacenamiento local son nombres que no se han sincronizado (ya sea desde la sesión actual o incluso desde una sesión anterior).
Cuando el usuario inicie la sesión por primera vez, leerá todos los nombres fuera del almacenamiento local para rellenar _namelog matriz _namelog para mostrar al usuario todos los nombres que aún deben sincronizarse.
Cada vez que el usuario agregue un nombre, leerá la matriz actual de nombres fuera del almacenamiento local (digamos desde los namesToPush clave namesToPush ), namesToPush el nombre más nuevo en la matriz namesToPush así como a _nameLog array, luego JSON.stringify the namesToPush matriz de nuevo en el almacenamiento local. Desea siempre agregar el nombre al almacenamiento local ya que no sabe cuándo el usuario cerrará la sesión actual.
Luego, cuando el usuario sincronice los nombres, leerá todos los nombres del almacenamiento local y los publicará. Si la publicación es exitosa, namesToPush del almacenamiento local; de lo contrario, los dejas ahí para que se vuelvan a sincronizar más tarde.
Los beneficios de este enfoque son que
No tiene que intentar realizar un seguimiento de los nombres que no se han sincronizado en la matriz
_nameLog(resuelve el problema actual).Usar una única matriz en el almacenamiento local significa solo una lectura / escritura en el almacenamiento local con el nombre agregado y la sincronización, y solo una eliminación (escritura) en una sincronización exitosa.
Si utilizó una clave única para agregar nombres al almacenamiento local, tendría que guardar la primera clave utilizada para un lote de nombres no guardado, de modo que pueda recuperar correctamente todos los nombres que aún no se hayan sincronizado en una sesión posterior. Esto podría conducir fácilmente a errores "uno por uno", ya que debe hacer un seguimiento de este índice en cada sincronización.
Aunque un enfoque clave único puede evitar que tenga que leer en el almacenamiento local con el nombre agregado, cualquier ahorro potencial se pierde con una sincronización exitosa, ya que tendrá que eliminar esos muchos nombres del almacenamiento local. Esto también podría generar problemas si el usuario cierra la sesión antes de que se eliminen todos los nombres del almacenamiento local.
Al leer en el almacenamiento local cada publicación en lugar de intentar mantener un conjunto local de nombres pendientes, ayuda a garantizar que no se pierda ningún nombre al no estar en uno u otro (también ayuda a eliminar posibles problemas de almacenamiento en caché o publicar un nombre dos veces debido a un error).
Quiero registrar acciones en mi aplicación angular.
Si no puedo publicar, quiero agregar el elemento a otro registro en el almacenamiento local para que la próxima vez que publique pueda probar y agregar estos elementos también.
Una vez hecho esto, quiero probar y publicar los elementos actuales. También quiero tener un botón (sincronización) que se ejecuta a través del proceso sin pasar por el proceso de registro de acciones. para que el usuario pueda probar y publicar todos los elementos que no pudieron publicar antes.
Estoy pensando en abordarlo así. en enviar
-agrega el artículo al almacenamiento local, luego intenta publicarlo. (para que publique artículos anteriores primero)
en el exito
-recuperar ítem del almacenamiento local
en error
-mantener el artículo en el almacenamiento local
Estoy en una buena senda para que esto funcione como se muestra a continuación, sin embargo, no estoy seguro de si esta es la mejor manera de abordar esto.
Por el momento, puedo publicar los datos sobre el éxito pero no eliminar el elemento individual del almacenamiento local.
Agregué un userService llamado removeName que he comentado en mi código siguiente, ya que actualmente elimina el _nameLog en lugar de la referencia de almacenamiento local del artículo.
Pero cuando ejecuta el código en la demo de codepen , publica cada elemento cada vez, ya que no los elimino cuando lo hago.
¿Cómo puedo eliminar el elemento de almacenamiento local si no se elimina el _namelog (como esta necesidad de permanecer en ng-repeat) o hay una forma diferente de que me acerque a esto?
<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>
"¿Cómo puedo eliminar el elemento de almacenamiento local si no se elimina el _namelogue"?
Tienes algunos problemas con tu diseño:
1) Para la clave de almacenamiento local = nombre, el valor es una matriz. En su prueba, no sabe qué elemento de la matriz está publicando. Si supiera que puede recuperar esa matriz de LS empalme ese elemento de la matriz y vuelva a codificarlo en el LS.
2) Requiere demasiado String to JSON de ida y vuelta.
Por lo tanto, mi consejo es seguir un esquema de nombres clave como nombre-0, nombre-1, nombre-2 y almacenar cada entrada de registro como una clave separada. Mantenga un contador en el LS. Incremente esto al agregar entrada de registro. Luego, en tu prueba, puedes borrar esa clave. Pase k como parámetro para testPost desde getPosts.
La solución está en solución 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);
}
}
}
]);