javascript - localStorage 第二个参数不接受 input.value

Question

我正在使用 localStorage 来存储一些值，但它不适用于我已确认是字符串的输入。它适用于像“鸡”这样的硬编码字符串，但不适用于 input.value 这是我的代码：https ://codepen.io/levinson2504/pen/gObzZON?editors=0011

let menu = [];

      const menuDiv = document.querySelector("#menu");
      const inputName = document.querySelector("#item-name");
      const inputPrice = document.querySelector("#item-price");

      document.querySelector("#add-btn").addEventListener("click", addItem);
      document.querySelector("#del-btn").addEventListener("click", () => delItem(menu.length - 1));

  function render(items) {
        menuDiv.innerHTML = "";
        [inputName, inputPrice].forEach(input => input.value = "");
        items.forEach((item, index) => menuDiv.append(menuElement(item, index)));
      }

      function menuElement(item, index) {
        const menuText = document.createElement("span");
        menuText.innerText = `${item.itemName}   -   ${item.itemPrice}`;

        const delBtn = document.createElement("button");
        delBtn.innerText = "delete item";
        delBtn.addEventListener("click", () => delItem(index));

        const itemDiv = document.createElement("div");
        [menuText, delBtn].forEach(el => itemDiv.append(el));

        return itemDiv;
      }

 function delItem(index) {
        menu.splice(index, 1);
        render(menu);
      }

  function addItem() {
        menu.push({
          itemName: inputName.value, 
          itemPrice: inputPrice.value
          });
        render(menu);
        let item = "chicken"
        localStorage.setItem("itemName", item);
        localStorage.setItem("itemPrice", inputPrice.value );
        console.log(localStorage.getItem("itemName"));
        console.log(localStorage.getItem("itemPrice"));
      }

标签： javascripthtmlstring

Answer 1

您的render方法会清除您的输入值。由于您是render在设置 localStorage 中的值之前调用的，因此您只会得到一个空值。在调用之前将值存储在 localStorage 中render：

function addItem() {
  menu.push({
    itemName: inputName.value, 
    itemPrice: inputPrice.value
  });

  let item = "chicken"
  localStorage.setItem("itemName", item);
  localStorage.setItem("itemPrice", inputPrice.value);
  console.log(localStorage.getItem("itemName"));
  console.log(localStorage.getItem("itemPrice"));

  render(menu);
}