Auto-saving the data comes into action when your application needs to work offline and the CDN(content delivery network) will fail. In this article, we are going to access the required steps that are intended to save your application locally when offline and submit it once a connection has prevailed.
- Before comprising the libraries which make your app work offline make sure to download the actual file (example: angular.js).
- For instance, we’ll have a basic file named app.js that contains our Angular code, and a html document which is index.html which contains all our html code.
Hence, let us take an example of data entry application and build a form which collects data about dogs. if you’re studying about the respective breed of the dog, your application may go offline occasionally depending on your situated location.
Note that, we have added a new term data-ng-model for all the inputs. Lets create a parent object called $scope.formData for our input data models.
$scope.save function will handle the data saving instance to the local storage and $scope.sync will handle the submitting operation when the application goes online.
The Output(When Offline):
Now, we are offline hence it will show us the below.
Let’s now deep-dive into performing the functions and storing the data offline once the user enters the data in the form.
Save function– LocalStorage will save our data in string key-value pairs.
The data which is being stored in the localStorage will accept the Strings. Below in save function, we declare a stringCopy variable, and a lcKey property on $scope.formData. We use timestamp which is a unique identifier.
- JSON File
JSON format file is often used for imparting structured data over a network connection. It primarily transmits the data between a server and a web application. Hence while parsing the stringed JSON, if it is not valid, it throws an exception. In order to avoid these exceptions let’s make use of tr-catch block for handling it.
stringCopy = JSON.stringify($scope.formData);
Parsing localStorage and saving to server- Saving your data to the local storage when you are offline using JSON.stringify. Now we use JSON.parse to sync the data to the database when your application goes online.
Note–We Included a button to our html document to save and submit your data to the local storage inside the form section.
- app.js File
Finally after syncing the data, The Output(When online):
We used the fetchAll function to automatically detect the connection and save your data and sync it to the database. We’ll call this in the in the submit function. Once the connection is established the data which is being stored in the localStorage will be synced by looping through the records stored one-by-one and submit them to the database.
Hence this article helps you to store your data locally to the localStorage when your application is offline and sync the data to the database when it gets online using $scope functions for the input and parsing them.
- Adding Angular Material Component to Angular Application
- Angular 7 | Angular Data Services using Observable
- How to Add Google Locations Autocomplete to your Angular Application ?
- How to group data with Angular filter ?
- How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
- Angular CLI | Angular Project Setup
- Routing in Angular JS using Angular UI Router
- Service Worker | How to create custom offline page ?
- Difference between Angular 4 and Angular 5
- Angular 7 | Components
- Angular 7 | Introduction
- Angular 7 | Installation
- Angular 7 | Architecture
- How to use bootstrap 4 in angular 2?
- Angular 7 | Directives
- How to use mat-icon in angular?
- How to use jQuery in Angular ?
- Angular 7 | Observables
- Angular 4 | Introduction
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.