HTML5 Offline Storage - Alternative To Session?

I am working on a website which uses Session heavily. We are planning to migrate this website from framework 2.0 to framework 4.0. We are also planning to use HTML5. Since we are r

Solution 1:

Session data is stored on the server, HTML5 offline storage is stored in the browser. If you are comfortable storing session data in the browser, sure that will work. If you have sensitive information that should remain on the server however, keep it in sessions.

Solution 2:

It can certainly be used as an alternative to some of the things sessions are currently used for.

And it doesn't have the horrible effect on scalability that sessions have, so I'd certainly say you should use it when you can.

That said, the scalability hit of doing a bit more with sessions once you're using them is minor compared to the difference between using or not using them at all, so if you can't eliminate sessions entirely, you might not find it gained you all that much.

But for storing client state, it is a much more sensible solution (the client state is on the client, which sounds almost redundant it's so sensible an idea), so for that alone it's worth doing when you can.

Solution 3:

hi well yes you can store your values in html5 storage objects such as sessionStorage/localStorage, visit Html5 Storage Doc to get more details. using this you can store intermediate values temporaryly/permanently locally and then access your values for storing values for a session

sessionStorage.getItem('label')
sessionStorage.setItem('value', 'label')

or store values permanently using

localStorage.getItem('label')
localStorage.setItem('value', 'label')

so any session data that you need to store, you can use the sessionStorage provided by html5.

Solution 4:

One thing to note when using newer HTML5 api's is if it's supported by the browser the user is currently using. You can use a library like Modernizer to do feature detection.

The Aspnet Session and Local Storage are not equivalents. You can use Local Storage to maintain state if that is your goal.

In the past I have adopted a cookie based way of saving data instead of local storage (to safely target all browsers...with cookies on anyway). Maybe it can help. Please note the below code requires JSON2.

var Util = (function () {
    return {
        // Wrapper module for getting and setting cookies
        CookieManager: {
            set: function (name, value, days) {
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();
                }
                else var expires = "";
                document.cookie = name + "=" + value + expires + "; path=/";
            },
            get: function (name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            },
            erase: function (name) {
                this.set(name, "", -1);
            }
        }
    }
})();

var UserPrefs = (function () {
    var cookieName = 'UsrPrf';
    var data = {};
    return {
        set: function (propName, value) {
            if (data == null) data = {};
            data[propName] = value;
        },
        get: function (propName, defaultValue) {
            if (data == null) {
                data = {};
                return defaultValue;
            } else {
                return data[propName] == undefined ? defaultValue : data[propName];
            }
        },
        load: function () {
            try {
                data = JSON.parse(Util.CookieManager.get(cookieName));
            } catch (e) {
                data = {};
            }
            return data;
        },
        save: function (ttl) {
            if (!ttl) ttl = 30;
            Util.CookieManager.set(cookieName, JSON.stringify(data), ttl);
        }
    };
})();