jquery - 将 DOM 元素保存到另一个页面中以供后用（Chrome 扩展程序）

Question

我正在尝试保存一个 DOM 节点以将其插入到同一网站的另一个页面中。

我在我的扩展中使用 jQuery。我在 content_script.js 中所做的是：

var variableToStore = localStorage["variableToStore"];

if (variableToStore == null) {
    localStorage["variableToStore"] = jQuery("#myDomNode").clone();
    variableToStore = localStorage["variableToStore"];
}

variableToStore.insertAfter(jQuery("#someelementofanotherpage"));

我做错了什么？localStorage 无法保存 DOM 对象？如果没有，我怎样才能实现我的目标？

谢谢。

Answer 1

简而言之，不，您不能将 DOM 元素存储在本地存储中。即使使用 jStorage 插件，您也不能将 DOM 元素存储在本地存储中，如介绍文本中所述：http: //www.jstorage.info/

您可以将 JavaScript 的 HTML 编码字符串存储在本地存储中，然后将其转换回 html（请参阅此 Q&A以获得该领域的帮助）

Answer 2

Francois 的解决方案有效，但是 clone() 不反映 JQuery 修改，所以我必须先运行它：

$("input").each(function(){
    $(this).attr("value", $(this).val());
});

我用 jStorage 来存储表单的整体状态。

（我没有足够的声誉来评论，对不起）

Answer 3

您可以使用 html 代码保存一个字符串，试试这个：

var div=$('<div></div>');
$("#myDomNode").clone().appendTo(div);
localStorage["variableToStore"] = escape(div.html());
...
var variableToStore = unescape(localStorage["variableToStore"]);
$(variableToStore).appendTo($("#someelementofanotherpage"));