访问先前由另一个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变量都会被破坏。

如果要在两个页面之间共享某些变量，则需要使用Cookie或本地存储，或者需要后端来存储值。 或者您需要SPA