极客教程在Angular 8中，如何在应用程序离线时自动保存数据
当你的应用程序需要离线工作并且CDN（内容交付网络）失败时，自动保存数据就会发挥作用。在这篇文章中，我们将访问所需的步骤，这些步骤是为了在离线时将你的应用程序保存在本地，一旦连接成功就提交。
环境搭建:
- 在组成使你的应用程序离线工作的库之前，确保下载实际文件（例如：_angular.js _）。
- 例如，我们将有一个名为_app.js _的基本文件，其中包含我们的Angular代码，还有一个html文档，即_index.html _，其中包含我们所有的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>
<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>
注意，我们已经为所有的输入添加了一个新的术语data-ng-model。让我们为我们的输入数据模型创建一个名为scope.formData的父对象。scope.save函数将处理数据保存实例到本地存储，$scope.sync将处理应用程序上线后的提交操作。
输出（离线时）。
Page Output (Enter the Values)
现在，我们处于离线状态，因此它将向我们显示以下信息。
我们是离线的
现在让我们深入探讨一下，一旦用户在表单中输入数据，执行功能并离线存储数据。
Save函数 – LocalStorage将把我们的数据保存为字符串键值对。
被存储在localStorage的数据将接受字符串。在下面的save函数中，我们声明了一个stringCopy变量，以及$scope.formData.上的lcKey属性，我们使用了timestamp，这是一个唯一的标识符。
- JSON File
JSON格式文件通常用于通过网络连接传递结构化数据。它主要在服务器和网络应用之间传输数据。因此，在解析JSON字符串时，如果它是无效的，它会抛出一个异常。为了避免这些异常，让我们使用tr-catch块来处理它。
JSON是JavaScript Object Notation的缩写，是一种独立的语言，json是一种数据格式，它允许我们与任何平台分享数据。它可以将数据分发到任何类型的媒介上，并且链接JSON是不复杂的。
stringCopy = JSON.stringify($scope.formData);
解析localStorage并保存到服务器- 当你离线时，使用JSON.stringify将你的数据存入本地存储。现在我们使用JSON.parse在你的应用程序上线时将数据同步到数据库。
注意：我们在html文档中加入了一个按钮，以保存并提交你的数据到表格部分的本地存储器中。
- app.js File
App.js代表你设计NodeJs应用程序的主要javascript文件。该文件必须存储在主应用程序根目录下。该文件也可以包含一个不同的名字（例如：main.js）。它在nodejs的功能和html代码之间建立了一个界面，在你的web应用上。
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
}
};
}]);
最后在同步数据后，输出（在线时）。
数据将被保存到你的本地主机
我们使用fetchAll函数来自动检测连接并保存你的数据并同步到数据库中。我们将在提交函数中调用它。一旦建立了连接，存储在localStorage中的数据将通过逐一循环存储的记录进行同步，并将它们提交给数据库。
因此，这篇文章可以帮助你在应用程序离线时将数据存储在本地的localStorage中，并在其上线时使用$scope函数进行输入和解析，将数据同步到数据库。