Saving / state of global data / Javascript object

Is there a way to store the global data in an object window

so that the data can survive page reload / refresh. So let's say that I am assigning my global data / object -

window.myObject = myProductObject


And the user refreshes / reloads the page or can navigate to another page of my site. Is it window.myObject

available after page reload?

NOTE -: I cannot store the object in the cookie as its object, I mean, it can be a reference to another custom object or it can refer to another "window" object that has opened through ""


source to share

4 answers

Use a


var data = ? JSON.parse( : {}
... = JSON.stringify(data)

saved when loading pages

I recommend using an abstraction like lawnchair , although



You can store objects in cookies. But localStorage is better. Similar to a cookie, but you get 5 MB to use.

You have to encode / decode JSON if you are storing objects instead of strings, but this is easy with a wrapper on localStorage or cookie.

Here's a really simple wrapper for localStorage (you have 5Mb to use):

var Storage = {
    set: function(key, value) {
        localStorage[key] = JSON.stringify(value);
    get: function(key) {
        return localStorage[key] ? JSON.parse(localStorage[key]) : null;


And you can use it like this:

$(function() {
    var defaultValue = {param1: 'value',counter: 0 },
        myObj = Storage.get('myObj') || defaultValue; // get the obj from storage or create it with default values

    $('body').html('counter: ' + myObj.counter);
    myObj.counter+=1; // increment counter 
    Storage.set('myObj', myObj); // save it to localStorage


You can try it out on this jsFiddle:



It is possible to try to store the string representation of your object in a cookie if the object consists only of values ​​(no methods), for example

var foo = { a: "a", b: "b" };
document.cookie = "foo=" + JSON.stringify(foo);


There is a good example of reading / writing a cookie here -



I don't know what it looks like in a cross browser. I at least got it to work in chrome, firefox and IE9 and IE8 / 7 in compatibility mode, but you get a pop-up warning. You can determine if pop-ups are blocked and refuse to download anything until they are enabled for your site. See Detecting Blocked Popup in Chrome

I am using jQuery to bind to the beforeunload event, you can use your preferred solution.

jQuery(function ($) {
    $(window).bind('beforeunload', function () {"", "_savedata", "titlebar=0,width=100,height=100").saveData = window.saveData;

    var store ="", "_savedata");      
    window.saveData = store.saveData;


Example: (refresh the page several times)

And as requested by @Raynos - keeping the close state is something you can't serialize (works in firefox and chrome at least, IE calls it a security issue, but might be related to the way jsfiddle uses frames)

Disclaimer . I would not vouch for the elegance of this solution. I was just curious about persisting object state using popups. Serializing your JSON object and storing it in a store on the client side is much better (@Raynos would recommend lawnchair ). You should avoid cookies if you can, as this data will be sent back to the server, which may not be ideal.

If your main goal was to keep the popup links, you can actually do so by specifying the popup name. This is how I keep my link to the popup that I create when I update.



All Articles