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 "window.open"
source to share
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: http://jsfiddle.net/guumaster/LytzA/3/
source to share
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 - https://developer.mozilla.org/en/DOM/document.cookie
source to share
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 () {
window.open("", "_savedata", "titlebar=0,width=100,height=100").saveData = window.saveData;
});
var store = window.open("", "_savedata");
window.saveData = store.saveData;
store.close();
});
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 https://github.com/brianleroux/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.
source to share