Pass Values from One Page to Another

When we need to pass values from one page to another, two most common ways it is implemented is to either use a query string parameter and append the data to query string in the URL, or use a postback to post the data using form submission. Recently I was required to pass some values from one page to another page so I went ahead and did a quick query string implementation to pass the values which worked pretty well until I looked at the analytics data which reported same page with different query parameter as different URLs. I didn’t like it (neither did my SEO team) since the query string parameters did not change the functionality of the target page. It just happened to be some additional data for the target page so I decided to go for alternate options.

Next option was to use session state but that data is stored on the server side and I did not want server to have to manage any data so I went for pure client side implementation. Now a days pretty much all browsers support web storage so it was easy to achieve the functionalty using sessionStorage. Here is the quick implementation using sessionStorage which uses cookies as a fallback method to pass data between pages. There can be other implementations which can also take care of the scenarios where neither sessionStorage nor cookies are enabled in the browser. For my use case it was not a requirement so check out my simple implementation

window.cookieStorage = {
    setItem: function (id, val) {
        // not passing expiration duration makes cookie last only the current session
        this.writeCookie(id, val);
    },
    getItem: function (id) {
        return this.readCookie(id);
    },
    removeItem: function (id) {
        // setting cookie data to blank and duration to negative will delete the cookie
        this.writeCookie(id, '', -1);
    },
    readCookie: function (key) {
        var nameEQ = key + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            console.log(c);
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    },
    writeCookie: function (key, value, days) {
        var expiration = (function () {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                return "; expires=" + date.toGMTString();
            }
            else {
                return "";
            }
        })();
        document.cookie = key + "=" + value + expiration + "; path=/";
    }
};

function LocalSessionManager() {
    var supported = this.localSessionSupported();
    this.storage = supported ? window.sessionStorage : window.cookieStorage;
}

LocalSessionManager.prototype = {
    localSessionSupported: function () {
        try {
            return typeof (window.sessionStorage) !== "undefined";
        } catch (error) {
            return false;
        }
    },
    saveItem: function (key, data) {
        this.storage.setItem(key, JSON.stringify(data));
    },
    getItem: function (key) {
        var dataJSON = this.storage.getItem(key);
        return dataJSON ? JSON.parse(dataJSON) : null;
    },
    removeItem: function (key) {
        this.storage.removeItem(key);
    }
};

var sessionManager = new LocalSessionManager;

We have sessionManager class available in client side which takes care of saving and retreiving data. It uses sessionStorage and then falls back on cookies if sessionStorage is not available in the browser.

In order to use it simply set the value on page 1 as following

sessionManager.saveItem(key, somedata);

On page 2 use the key to retrieve the value

var item = sessionManager.getItem(key);

So that is all about the quick replacement of query string parameters in my application. Go SEO..