Angularjs Store in Localstorage - ngStorage

Angularjs Store in Localstorage – ngStorage

Today, We want to share with you Angularjs Store in Localstorage – ngStorage.In this post we will show you how to use localstorage in angularjs example, hear for sessionstorage ngstorage in Angular we will give you demo and example for implement.In this post, we will learn about Store Data Locally using $localstorage in AngularJS with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Angularjs Store in Localstorage – ngStorage

There are the Following The simple About Angularjs Store in Localstorage – ngStorage Full Information With Example and source code.

As I will cover this Post with live Working example to develop $window.localstorage angularjs, so the ngstorage npm for this example is following below.

Example of the Local storage in Angularjs

app.factory('userService', ['$rootScope', function ($rootScope) {

    var service = {

        model: {
            username: '',
            useremail: ''
        },

        SaveState: function () {
            sessionStorage.userService = angular.toJson(service.model);
        },

        RestoreState: function () {
            service.model = angular.fromJson(sessionStorage.userService);
        }
    }

    $rootScope.$on("savestate", service.SaveState);
    $rootScope.$on("restorestate", service.RestoreState);

    return service;
}]);

Store Data Locally using $localstorage in AngularJS

var studentInfo = {
    firstname: "Jaydeep",
    lastname: "Gondaliya",
    website: "https://www.pakainfo.com"
}

window.localStorage.set("saved", JSON.stringify(studentInfo));

var studentInfo = JSON.parse(window.localStorage.get("saved"));

Full Example : AngularJS Local Storage – ngStorage

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
        <script src="ngStorage.min.js"></script>
        <script>
            var myApp = angular.module("myApp", ["ngStorage"]);
            myApp.controller("PakainfoController", function($scope, $localStorage) {

                $scope.save = function() {
                    $localStorage.message = "Welcome to Pakainfo.com";
                }

                $scope.load = function() {
                    $scope.data = $localStorage.message;
                }

            });
        </script>
    </head>
    <body ng-app="myApp">
        <div ng-controller="PakainfoController">
            <button ng-click="save()">Save</button>
            <button ng-click="load()">Load</button>
            <br>
            {{data}}
        </div>
    </body>
</html>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angularjs Store in Localstorage – ngStorage.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   JavaScript Array Methods tips, tricks and examples
  2.   How To Add Flash Messages in Laravel 6 Session?
  3.   Laravel 6 create zip archive file and download example
  4.   Difference between break and continue
  5.   How to Create, Access and Destroy Sessions in Asp.Net
  6.   Top 10 ASP.NET MVC Interview Questions and Answers
  7.   Loop Binding in Vue.js With V-for
  8.   Angular 5 NgSwitch Example Tutorials
  9.   jQuery Check an Element is Visible or not
  10.   Google Style Text Avatar using PHP Example