Question

如何将文本保存到本地存储，并访问它并将其附加到链接网页上的 OL

2021-04-28

236

javascript function variables local-storage dom-events

我想从 index.html 上的输入中捕获文本，并将其保存到本地存储。
在 index2.html 上，我想从本地存储中获取项目，创建一个新的 li，并将其附加到空的 OL。

我目前拥有的代码总是给我一个错误“未捕获的类型错误：无法读取 null 的属性‘appendChild’。

所以我猜它无法访问我的 OL（即有序变量）。

我是新手，我正在尝试创建一个笔记应用程序来练习，那么我做错了什么？

let notes = document.querySelector("#note");
let submit = document.querySelector(".submit-btn");
let view = document.querySelector(".view-btn");
let ordered = document.querySelector("#notes-list");
let form = document.querySelector("form");


submit.addEventListener("click", (e) => {
    e.preventDefault();
    
    localStorage.setItem("note", notes.value);
    let newLI = document.createElement("li");
    newLI.innerHTML = localStorage.getItem("note");
    ordered.appendChild(newLI);
    notes.value = "";
});

Answer 1

我不知道该告诉你什么。下面的代码似乎有效。也许你可以仔细检查一下你的代码？

我不得不删除 localStorage 代码，因为它在 Stackoverflow 上不起作用。

let notes = document.querySelector("#note");
let submit = document.querySelector(".submit-btn");
let ordered = document.querySelector("#notes-list");

submit.addEventListener("click", (e) => {
    e.preventDefault();
    
    let newLI = document.createElement("li");
    newLI.innerHTML = notes.value;

    ordered.appendChild(newLI);
    notes.value = "";
});

<ol id="notes-list"></ol>

<form id="my-form">
  <input type="text" id="note" onfocus="this.select()" />

  <button type="submit" form="my-form" class="submit-btn">Submit</button>
</form>

需要考虑的一件事是，因为这样做通常很好，即创建一个 inti 方法，然后使用 window.addEventListener('load', methodName) 激活它，或者像我在下面的示例中对 body 标签所做的那样。但是，我看不出这与你已经做过的事情有什么不同。

var notes, submit, ordered;

function initVariables() {
  notes = document.querySelector("#note");
  submit = document.querySelector(".submit-btn");
  ordered = document.querySelector("#notes-list");

  submit.addEventListener("click", addToList);
}

function addToList(e) {
  e.preventDefault();

  let newLI = document.createElement("li");
  newLI.innerHTML = notes.value;

  ordered.appendChild(newLI);
  notes.value = "";
}

<body onload="initVariables()">

  <ol id="notes-list"></ol>

  <form id="my-form">
    <input type="text" id="note" onfocus="this.select()" />

    <button type="submit" form="my-form" class="submit-btn">Submit</button>
  </form>

</body>

Answer 2

我为任何在我之后的新手找到了解决方案。

我以为我可以在我的 index.html 和 index2.html 上使用 app.js...但那样不行。

每个索引都需要自己的 js 文件。

所以这就是我所做的。

在 index.html 的 app.js 上，我让它捕获注释并将其设置为 localstorage。使用点击事件。

然后在 index2.html 上，我直接将 js 添加到文件中（我想我可以创建 app2.js，但这不是必需的）。但我所做的只是让这个 js 从本地存储中获取密钥，创建一个新的 Li 并将其附加到我的 OL。现在它运行正常。