Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Use ngStorage For All Your AngularJS Local Storage Needs

TwitterFacebookRedditLinkedInHacker News

I’ve been doing a lot of work with AngularJS lately, and in particular Ionic Framework. However, up until recently I have been using either HTML5 local storage or SQLite.

Now I’ve switched gears and started using the AngularJS module ngStorage which has made my life a lot easier.

Previously when using HTML5 local storage, I continuously had to serialize and unserialize my objects before using or saving them. For example, let’s say I had the following object:

var myObj = {
    firstname: "Nic",
    lastname: "Raboy",
    website: "https://www.thepolyglotdeveloper.com"
}

If I wanted to save this object into local storage I would have had to serialize it using the JSON.stringify function.

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

The above code will save our object under the key saved in local storage.

If we wanted to use the object that we saved we would have to unserialize it using the JSON.parse function.

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

Alright, so you’re probably wondering by now what makes ngStorage different.

ngStorage via GitHub repository:

Right from AngularJS homepage: “Unlike other frameworks, there is no need to […] wrap the model in accessors methods. Just plain old JavaScript here.” Now you can enjoy the same benefit while achieving data persistence with Web Storage.

You can save and use your objects in object form. No need to serialize or unserialize your data.

So lets get a sample AngularJS project started to demonstrate how to use the ngStorage library.

<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 example = angular.module("example", ["ngStorage"]);
            example.controller("ExampleController", function($scope, $localStorage) {

                $scope.save = function() {
                    $localStorage.message = "Hello World";
                }

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

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

The above code is just a very basic example page that demonstrates how to use ngStorage in your project. This is how you include the library in your project for use.

With the library set up and ready to go, you can use it like any other JavaScript object. Keeps your code clean with minimal headache.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site