javascript - 存储目标容器的 HTML 和 CSS

Question

我有一个包含一些 html 的容器 div - 例如:

<div id="container">
     <h1>Bla bla</h1>
     <div class="myItem"></div>
     <a href="#">Send</a>
</div>

和一些与容器相关的css:

#container {background:red;}
#container h1 {font-size:30px;}
#container .myItem {color:red;font-size:12px;}

我想将容器内的所有 html 和所有相关的 css 存储在一些变量/数据库/任何可用的东西中，然后将其加载回新页面。内容是动态的，由用户决定容器及其内容的样式。

我怎样才能做到这一点？我考虑的一种方法是使用 javascript 检索所有这些属性，而不是以某种方式将它们存储在数据库中以便稍后加载它们，或者尝试使用 html5 webstorage 执行此操作。

有没有插件可以做到这一点？

编辑:我也尝试过 html2canvas，但它对 css3 的支持不足以正确呈现元素。

Answer 1

如果 CSS 和 HTML 都存储在页面中，您只需获取内容(基于包装器)并将其存储在 localStorage 中(如果这符合您的目的)。

jQuery 和 localStorage 的示例...您需要更改保存内容的位置以适合您的情况。

jsFiddle

保存元素:

var html = $('#container').html();
localStorage.setItem('html', html);

var css = $('#csscontainer').html();
localStorage.setItem('css', css);

拉取/显示元素:

var showHtml = localStorage.getItem('html');
var showCss = localStorage.getItem('css');

$('#showHtml').html(showHtml);
$('#showCss').html(showCss);