AngularJS, HTML5, JavaScript

Using HTML5 LocalStorage with AngularJS

Today , I will talk about LocalStorage Support of HTML5.

We can store named key/value pairs locally, within the client web browser. Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you. Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually). Unlike all previous attempts at providing persistent local storage, it is implemented natively in web browsers, so it is available even when third-party browser plugins are not.

HTML5 STORAGE SUPPORT
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
8.0+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+

Based on different browsers , we can get 2 MB to 5MB (even more) space in LocalStorage . To get more idea on space check out this link …

BY the below code , we can check our browser supports LocalStorage or Not !

function supports_html5_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

Also we can use Modernizr to check this .

if (Modernizr.localstorage) {
    // window.localStorage is available!
} else {
    // no native support for HTML5 storage :(
}

Lets develop a simple LocalStorage Cache framework with AngularJS .

For this , am gonna create an AngularJS Factory Service to communicate with the HTML5 LocalStorage .

'use strict';

valApp.factory('storageService', function ($rootScope) {

    return {
        
        get: function (key) {
           return localStorage.getItem(key);
        },

        save: function (key, data) {
           localStorage.setItem(key, JSON.stringify(data));
        },

        remove: function (key) {
            localStorage.removeItem(key);
        },
        
        clearAll : function () {
            localStorage.clear();
        }
    };
});

localStorage keyword in the upper is the core API which is responsible for providing LocalStorage facility .

I have not used this storageService directly in the client .I am gonna use another Mid Layer Factory which will communicate with storageService and client code will call this Mid Layer Factory named cacheService . This is like below :::

'use strict';

valApp.factory('cacheService', function ($http, storageService) {
    
    return {
        
        getData: function (key) {
            return storageService.get(key);
        },

        setData: function (key,data) {
            storageService.save(key, data);
        },
        
        removeData: function (key) {
            storageService.remove(key);
        }
    };
});

You can see , I have injected storageService to cacheService .

Now from my AJs Controller , I will call cacheService’s Function to serve my purpose .

Now below is the example , how you can use this Cache Framework …

In My Controller , I’ve simply injected cacheService and can use all the features of it .

var city = [
                  { Id: 1, Name: 'Dhaka' },
                  { Id: 2, Name: 'Ctg' }
    ];
    cacheService.setData('city', city);

I have used the Mid Layer , if we need any new logic later, we can easily add those to the Mid Layer .

Its easy and awesome , right ?

Cheers 🙂

Advertisements
Standard