当您的应用程序需要脱机工作并且CDN(内容交付网络)将失败时，自动保存数据就会生效。在本文中，我们将访问所需的步骤，这些步骤旨在在脱机时在本地保存您的应用程序，并在建立连接后将其提交。
环境设置：
- 在组成使您的应用程序脱机工作的库之前，请确保下载实际文件(例如： angular.js )。
- 例如，我们将有一个名为app.js的基本文件 其中包含我们的Angular代码和一个HTML文档，即index.html 其中包含我们所有的html代码。
Offline AutoSave data in Angular 8
因此，让我们以数据输入应用程序为例，构建一个收集有关狗的数据的表格。如果您正在研究狗的各个品种，则取决于您所在的位置，您的应用程序有时可能会离线。
Offline AutoSave data in Angular 8
请注意，我们为所有输入添加了新的术语data-ng-model 。让我们为输入数据模型创建一个名为$ scope.formData的父对象。
$ scope.save函数将处理数据保存实例到本地存储，而$ scope.sync将处理应用程序联机时的提交操作。
输出(离线时)：
页面输出(输入值)
现在，我们处于离线状态，因此将向我们显示以下内容。
现在，让我们深入研究一下功能，并在用户以表格形式输入数据后脱机存储数据。
保存函数– LocalStorage将我们的数据保存为字符串键值对。
存储在localStorage中的数据将接受字符串。在保存函数下面，我们在$ scope.formData上声明一个stringCopy变量和一个lcKey属性。我们使用时间戳记，它是唯一的标识符。
- JSON文件
JSON格式文件通常用于通过网络连接传递结构化数据。它主要在服务器和Web应用程序之间传输数据。因此，在解析字符串JSON时，如果无效，则将引发异常。为了避免这些异常，让我们使用tr-catch块来处理它。
JSON代表JavaScript Object Notation是一种独立的语言，而json是一种数据格式，可以使我们与任何平台共享数据。它将数据分发到任何一种媒介，并且链接JSON并不复杂。
stringCopy = JSON.stringify($scope.formData);
解析localStorage并保存到服务器 当您使用JSON.stringify脱机时，会将您的数据存储到本地存储中。现在，当您的应用程序联机时，我们使用JSON.parse将数据同步到数据库。
注意–我们在html文档中包含一个按钮，用于保存数据并将其提交到表单部分的本地存储中。
- app.js文件
App.js代表您的主要javascript文件，用于设计NodeJs应用程序。该文件必须存储在主应用程序根目录中。该文件还可以包含其他名称(例如：main.js)。它通过Web应用程序在nodejs功能和html代码之间构建接口。
angular.module('app', [])
.controller('MainController', ['$scope', function ($scope) {
var fetchAll = function () {
var finds = [];
if (localStorage.length === 0) {
return [];
}
for (var i=0;i最后，在同步数据之后，输出(在线时)：
我们使用了fetchAll函数来自动检测连接并保存您的数据并将其同步到数据库。我们将在Submit函数中将其称为。建立连接后，将通过逐一循环存储的记录并将它们提交到数据库来同步存储在localStorage中的数据。
因此，本文可帮助您在应用程序脱机时将数据本地存储到localStorage，并在数据联机时使用$ scope函数进行输入和解析，从而将数据同步到数据库。