我怎样才能使本地存储获得 2 个不同的值？

Question

i've tried to make an simple app, its only user input and show the output, and now i tried to make local Storage. can anyone help me plis

this is my code

html

<aside class="input">
  <form action="#" id="form">
    <div class="form-section">
      <label for="name">Input Name</label>
      <input type="text" id="name">
    </div>
    <div class="form-section">
      <label for="title">Input Name</label>
      <input type="text" id="title">
    </div>
    <button class="submit-btn">Submit</button>
  </form>
</aside>

JavaScript

localStorage = "itsStorage";
function addVal() {
  const takeName   = document.getElementById("name").value;
  const takeTittle = document.getElementById("title").value;
  const wrapIt     = wrapper(takeName,takeTittle);
  const list       = document.getElementById("list");
  localStorage.setItem(takeName, takeTittle);
}
function wrapper(itsName, itsTittle) {
  const name       = document.createElement("h2");
  name.innerText   = itsName;
  const tittle     = document.createElement("p");
  tittle.innerText = itsTittle;
  const div        = document.createElement("div");
  div.classList.add("list");
  div.append(name, tittle);
  const outList    = document.querySelector(".list-output");
  outList.append(div);
  localStorage.getItem(name, tittle);
}

Answer 1

Something more like this

Use stringify to store an array and parse to get it back

I could not test it since Stacksnippets do not allow localStorage

Also I did not code a delete button

If you want one, you need to delegate

There were several other issues I tried to fix, study the code

window.addEventListener("load", function() {
  const outList = document.getElementById("container");
  const list = localStorage.getItem("list");
  list = list ? JSON.parse(list) || []; // if there is a list already
  list.forEach(({ name, title }) => wrapper(name, title)); // show

  document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission 
    const name = document.getElementById("name").value;
    const title = document.getElementById("title").value;
    const wrapper = wrapper(name, title);
    list.push({ name, title })
    localStorage.setItem("list", JSON.stringify(list));
  });

  function wrapper(name, title) {
    const header = document.createElement("h2");
    header.textContent = name;
    const p = document.createElement("p");
    p.textContentt = title;
    const div = document.createElement("div");
    div.classList.add("list");
    div.append(header)
    div.append(p)

    outList.append(div);

  }
})

<form action="#" id="form">
  <div class="form-section">
    <label for="name">Input Name</label>
    <input type="text" id="name">
  </div>
  <div class="form-section">
    <label for="title">Input Name</label>
    <input type="text" id="title">
  </div>
  <button class="submit-btn">Submit</button>
</form>
<div id="container"></div>