javascript - 访问先前由另一个 html 文件填充的对象

Question

我有 2 个文件 html(index.html 和 event.html)。

在我的文件中的 index.html 中，我导入了一个 JS:

<script type="text/javascript" src="../js/events/createEventOBJ.js"></script>

这是我的带有填充对象的 js 示例(事实上，通过 console.log 我可以看到我的 newObj):

var newObj = [];

function getOBJ(eventObj){
    newObj = eventObj;
    console.log(newObj);
}

function createObj(){
    return newObj;
}

现在，在另一个 html 文件中(event.html，我在 index.html 文件中输入了一个按钮)我使用这个:

<script type="text/javascript" src="../js/events/createEventOBJ.js"></script>

  <script>
    console.log(createObj());
  </script>

但它是空的，为什么？

另外一个问题是:

如果在 event.html 中我有这样的东西:

<div id="idevent" class="classGraph"></div>

在 createEventObj.js 中我使用了这个:

  var event1 = document.getElementById('idevent');

event1 未定义，为什么？

Answer 1

HTML 页面之间的 Js 变量(例如您创建的对象)是独立的。这意味着它们有不同的实例，你不能像那样共享对象。如果您在 index.html 上并且您要转到另一个页面，则 index.html 中的每个 js 变量都会被销毁。

如果你想在两个页面之间共享一些变量，你需要使用 cookies 或本地存储，或者有后端来存储这些值。或者你需要SPA