jQuery data（）设置未持久

Question

我正在开发chrome扩展程序，并尝试在“ content.js”文件中创建div，然后使用JQuery向其中添加数据。

这是“ content.js”中的相关代码：

var childrenDiv=document.createElement("div");
childrenDiv.id="childrenDiv";
document.body.appendChild(childrenDiv);
$("#childrenDiv").data("childwindows",[]);
$("#childrenDiv").data("childwindows");
console.log($("#childrenDiv").data("childwindows"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

启用扩展名并加载页面后，将在控制台中获得预期的“ []”输出。

但是，如果我留在控制台中，请尝试

$("#childrenDiv").data("childwindows");

再次

，它返回“ undefined”。为什么是这样？我希望绑定到DOM元素的数据能够持久存在。

Answer 1

尝试

var childrenDiv = document.createElement("div");
childrenDiv.id = "childrenDiv";
document.body.appendChild(childrenDiv);
$.data($("#childrenDiv")[0], 'childwindows', []);
console.log($.data($("#childrenDiv")[0], 'childwindows'));

Answer 2

Content scripts work in an isolated environment from the page。这意味着尽管页面和内容脚本都可以与DOM一起使用，并且任何控制台日志消息都将发送到同一控制台，但它们不会共享功能，变量等。

因此，您在控制台内部使用的jQuery（页面的jQuery）与内容脚本所使用的jQuery不同。这意味着通过页面扩展的jQuery无法访问通过扩展程序的jQuery data()存储的数据，因此为什么会获得undefined

如果要在环境中使用控制台，则内容脚本正在运行，然后进入“开发工具”控制台选项卡，然后从下拉菜单中选择扩展，如下所示：