Question

我正在开发一个Web项目，我正在使用jQuery拖放功能，以及调整元素大小等，每次关闭浏览器或重新加载时，一切都会重新开始。我想保持我的状态一点点，所以我认为保存整个环境并重新加载环境比记录每个更改更容易。

我正在尝试使用jQuery将完整的css环境存储到javascript变量中，而不必遍历每个元素，然后遍历每个元素的每个可能属性。

我希望它可以如此简单：

var cssEnvironment = document.css();

然后当窗口关闭，浏览器退出，浏览器重新打开，页面重新打开时，我会撤消操作。

document.css() = cssEnvironment;

一切都会恢复。有没有办法让功能与此类似？

Answer 1

由于您正在处理jQuery中的拖放和调整大小，因此所有这些更改都是针对内联样式进行的。您的外部样式表和<style>块不会改变。

你将必须循环遍历元素，而不是遍历每个属性。您只需获取每个元素的style属性即可。由于您稍后将加载此状态并将这些样式分配给特定元素，因此您只需要处理id设置的元素（否则您将无法在以后找到它来设置它）。 / p>

此演示创建一个JSON对象并保存到localStorage。

演示：http://jsfiddle.net/ThinkingStiff/VLXWs/

脚本：

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>

如何记录当前的css环境？

1 个答案: