如何记录当前的css环境？答案

【问题标题】：How to record current css environment?如何记录当前的css环境？
【发布时间】：2012-03-03 19:05:55
【问题描述】：

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

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

我希望它可以像这样简单：

var cssEnvironment = document.css();

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

document.css() = cssEnvironment;

一切都会恢复。有没有办法获得类似的功能？

【问题讨论】：

也许这适用于您的情况stackoverflow.com/questions/2758286/… 试试看
您必须保存每个元素的内联样式的值...
document.css() -- 不会那么简单 :)
我很确定您必须将应用程序的状态存储在服务器上并重新加载它。当您说“CSS 环境”时，您指的是可拖动元素的位置/大小，对吗？
您想要保存 DOM 然后将其解析回 html 的方法并不简单......这是一项艰巨的任务

标签： javascript jquery css json state

【解决方案1】：

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

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

此演示创建一个 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>

【讨论】：