El guardado automático de los datos entra en acción cuando su aplicación necesita funcionar sin conexión y la CDN (red de entrega de contenido) falla. En este artículo, vamos a acceder a los pasos necesarios para guardar su aplicación localmente cuando esté fuera de línea y enviarla una vez que haya prevalecido una conexión.
Configuración del entorno:
- Antes de comprender las bibliotecas que hacen que su aplicación funcione sin conexión, asegúrese de descargar el archivo real (ejemplo: angular.js ).
- Por ejemplo, tendremos un archivo básico llamado app.js que contiene nuestro código Angular y un documento html que es index.html que contiene todo nuestro código html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Offline AutoSave data in Angular 8</title> </head> <body data-ng-app="app"> <div data-ng-controller="MainController"> <!-- Main Form --> </div> <script src="angular.js"></script> <script src="./app.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Offline AutoSave data in Angular 8</title> </head> <body data-ng-app="app"> <div data-ng-controller="MainController"> <form name="form.DogBreedForm" novalidate data-ng-submit="save()"> <label for="commonIdentity"> Common Identity</label> <input id="commonIdentity" type="text" data-ng-model="formData.commonIdentity"> <label for="breedName">Breed</label> <select name="breedName" id="breedName" data-ng-model="formData.breedName"> <option value="first">First</option> <option value="second">Second</option> <option value="third">Third</option> </select> <label for="BreedFeatures"> Breed Features</label> <input id="BreedFeatures" type="text" data-ng-model="formData.BreedFeatures"> <button type="submit">Save Locally</button> <button type="button" data-ng-click="sync()">Sync</button> </form> </div> <script src="./angular.js"></script> <script src="./app.js"></script> </body> </html>
Salida de página (ingrese los valores)
stringCopy = JSON.stringify($scope.formData);
angular.module('app', [])
.controller('MainController', ['$scope', function ($scope) {
var fetchAll = function () {
var finds = [];
if (localStorage.length === 0) {
return [];
}
for (var i=0;i<localStorage.length;i++) {
try {
finds.push(
JSON.parse(localStorage.getItem(localStorage.key(i))));
} catch (err) {
console.log(err);
}
}
return finds;
};
$scope.formData = {};
$scope.save = function () {
var stringCopy = '';
$scope.formData.lcKey = Date.now().toString();
try {
stringCopy = JSON.stringify($scope.formData);
} catch (err) {
console.debug(err);
return;
}
localStorage[$scope.formData.lcKey] = stringCopy;
};
$scope.sync = function () {
var records = fetchAll();
if (
navigator && navigator.onLine && records.length) {
records.forEach(function (find, idx)
$http({
url: '/api/finds',
method: 'POST',
data: find
}).then(function (res) {
localStorage.removeItem(find.lcKey.toString());
ecords.splice(idx); //remove from records array
}, function (err) {
//error handling - service call failures
});
});
} else {
//error handling - Alert the user for patience
}
};
}]);
Publicación traducida automáticamente
Artículo escrito por nithyathimmaraju y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA