How to record current css environment?

I'm working on a web project where I'm using jQuery drag and drop functionality, along with resizing elements, etc, and every time I close my browser or hit reload, everything goes back to scratch. I'd like to maintain my state a little bit, so I'm thinking it would be easier to just save the whole environment and reload the environment than record every change.

I'm trying to use jQuery to store the full css environment into a javascript variable, without having to loop through every element, and then every possible property of every element.

I was hoping it could be as simple as:

var cssEnvironment = document.css();

And then when the window gets closed, browser quit, browser reopened, page reopened, I would reverse the action.

document.css() = cssEnvironment;

And everything would be restored. Is there any way to get functionality similar to this?

Since you're dealing with drag-and-drop and resizing in jQuery, all of these changes are made to the inline styles. Your external stylesheets and <style> blocks are not going to change.

You will have to loop through the elements, but not through each property. You can simply grab the style attribute for each element. Since you'll be loading this state later and assigning these styles to specific elements, you'll only be dealing with elements with id set (otherwise you won't be able to find it later to set it).

This demo creates a JSON object and saves to localStorage.

Demo: http://jsfiddle.net/ThinkingStiff/VLXWs/

Script:

function saveState() {
    var elements = document.querySelectorAll( 'body *' ),
        state = [];
    for( var index = 0; index < elements.length; index++ ) {
        if( elements[index].id && elements[index].style.length ) {
            state.push( { id:elements[index].id, style: elements[index].style.cssText } );
        };
    };
    window.localStorage.setItem( 'state', window.JSON.stringify( state ) );
};

function loadState() {
    var state = window.localStorage.getItem( 'state' );
    if( state ) {
        var styles = window.JSON.parse( state );
        for( var index = 0; index < styles.length; index++ ) {
            document.getElementById( styles[index].id ).style.cssText = styles[index].style;
        };
    };
};

document.getElementById( 'one' ).addEventListener( 'click', function() {
    this.style.color == 'green' ? this.style.color = 'black' : this.style.color = 'green';
});
document.getElementById( 'two' ).addEventListener( 'click', function() {
    this.style.color == 'red' ? this.style.color = 'black' : this.style.color = 'red';
});
document.getElementById( 'three' ).addEventListener( 'click', function() {
    this.style.color == 'blue' ? this.style.color = 'black' : this.style.color = 'blue';
});
document.getElementById( 'save' ).addEventListener( 'click', saveState );

loadState();

HTML:

<div id="one">click to toggle</div>
<div id="two">click to toggle</div>
<div id="three">click to toggle</div>
<button id="save">save</button>
<div>toggle colors, save, reload page</div>