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

Question

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

<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 的支持不足以正确呈现元素。

score 1 · Accepted Answer

如果 CSS 和 HTML 都存储在页面中，您可以抓取内容（基于包装器）并将其存储在 localStorage 中（如果这适合您的目的）。

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

保存项目：

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);

1 回答 1