How to record current css environment?

Question

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?

Maybe this will work in your case http://stackoverflow.com/questions/2758286/save-all-css-properties-of-element-using-jquery try it out — dotoree, Mar 03 '12 at 19:09
You'll have to save the values of the inline styles for each element... — Šime Vidas, Mar 03 '12 at 19:09
I'm pretty sure you'll have to store the application's state on the server and reload it. When you say "CSS environment" you're referring to the locations/sizes of draggable elements, correct? — Wesley Murch, Mar 03 '12 at 19:10
there will be nothing simple about your aproach of wanting to save the DOM and then parse it back to html... this is a big undertaking — charlietfl, Mar 03 '12 at 19:10
That will definitely work, if there are no simpler solutions, dotoree. Sadly I think you're right, maxedison and charlietfl. — Aaron, Mar 03 '12 at 19:23
That's right, Madmartigan. That's the majority of what I'd like to save, but I figured it would be handy to save it all if it could be easily done. — Aaron, Mar 03 '12 at 19:24
What about the state of DOMElements (like the selected `option` of a `select`) and the state of any JavaScript objects? — Halcyon, Mar 03 '12 at 20:48
You'd be better off only saving crucial elements to your application, so maybe `top` and `left` values since you're working with drag/drop. You could save this into [localStorage](http://diveintohtml5.info/storage.html#localstorage) or a cookie and reload those properties. — sinemetu1, Mar 04 '12 at 06:27

score 0 · Answer 1 · answered Jul 04 '12 at 11:18

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>

How to record current css environment?

1 Answers1

Linked