How do I write the current css environment?
I am working on a web project where I am using jQuery drag and drop as well as element resizing and so on, and every time I close the browser or hit reload everything goes back to scratching. I would like to save my state a bit, so I think it would be easier to just save the entire environment and reload the environment rather than log every change.
I am trying to use jQuery to store a complete css environment in a javascript variable, without having to loop through every element and then every possible property of every element.
I was hoping it would be that simple:
var cssEnvironment = document.css();
And then when the window is closed, the browser is closed, the browser is reopened, the page is reopened, I would undo the action.
document.css() = cssEnvironment;
And everything will be restored. Is there a way to get the same functionality?
source to share
Since you are dealing with drag and drop and resizing in jQuery, these changes are all done in inline styles. Your external stylesheets and blocks <style>
will not change.
You will have to iterate over the elements, but not through every property. You can just grab the attribute style
for each element. Since you will be loading this state later and assigning these styles to specific elements, you will only be dealing with elements with a id
set (otherwise you won't be able to find it later to set it).
This demo creates a JSON object and saves 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>
source to share