(Javascript) 从本地存储向表中添加数据答案

【问题标题】：(JavaScript) Adding data to table from local storage(Javascript) 从本地存储向表中添加数据
【发布时间】：2022-01-10 14:48:26
【问题描述】：

美好的一天，这是我正在尝试制作的某种日记，localStorage setItem 部分很好，这是我遇到问题的 getItem，在将条目添加到表后，当我刷新时，所有条目都消失了我只剩下 1 行带有默认输入值（“state？”和“”）。

JS代码：

const state = document.querySelector("#state");
const why = document.querySelector(".why");
const button = document.querySelector(".button");
const table = document.querySelector(".table");

// Date
var currentDate = new Date();
let cDay = currentDate.getDate();
let cMonth = currentDate.getMonth() + 1;
let cYear = currentDate.getFullYear();
let cDate = cMonth + "-" + cDay;

var sArray = [];

// Check if there's data in local storage

if (localStorage.getItem("states")) {
  sArray = JSON.parse(localStorage.getItem("states"));
}

getDataFromLocalStorage();

button.addEventListener("click", () => {
  if (state.value !== "state?") {
    addToArray();
    why.value = "";
    state.value = "state?";
  }
});

function addToArray() {
  addToTable();
  addDataToLocalStorage();
}
function addDataToLocalStorage() {
  window.localStorage.setItem("states", JSON.stringify(sArray));
}

function addToTable() {
  // Object
  let dataObject = {
    state: state.value,
    reason: why.value,
  };
  // Add to array
  sArray.push(dataObject);

  const tr = document.createElement("tr");
  const tdstate = document.createElement("td");
  const tdWhy = document.createElement("td");
  const tdDate = document.createElement("td");
  tr.appendChild(tdstate);
  tr.appendChild(tdWhy);
  tr.appendChild(tdDate);
  table.appendChild(tr);
  tdstate.innerText = dataObject.state;
  tdWhy.innerText = dataObject.reason;
  tdDate.innerText = cDate;
}

function getDataFromLocalStorage() {
  let data = window.localStorage.getItem("states");
  if (data) {
    let states = JSON.parse(data);
    addToTable(states);
  }
}

这是 HTML 代码

<body>
    <h1>How are you feeling today?</h1>
    <div class="content">
      <div class="form">
        <select name="state" id="state">
          <option>State?</option>
          <option value="very happy">Very happy</option>
          <option value="happy">Happy</option>
          <option value="okay">Okay</option>
          <option value="sad">Sad</option>
          <option value="terrible">Terrible</option>
        </select>
        <input class="why" type="text" placeholder="Why?" />
        <input class="button" type="button" value="Add" />
      </div>
      <table class="table">
        <th>State</th>
        <th>Reason</th>
        <th>Date</th>
      </table>
    </div>

    <script src="script.js"></script>
  </body>

【问题讨论】：

标签： javascript html local-storage

【解决方案1】：

你调用了addToTable(states);，但是这个函数不接受任何参数function addToTable() {。

你的逻辑似乎有问题。

你把它写到sArray，但从不使用这个值。

这里是盲试，没测试过：

const state = document.querySelector("#state");
const why = document.querySelector(".why");
const button = document.querySelector(".button");
const table = document.querySelector(".table");

// Date
var currentDate = new Date();
let cDay = currentDate.getDate();
let cMonth = currentDate.getMonth() + 1;
let cYear = currentDate.getFullYear();
let cDate = cMonth + "-" + cDay;

var sArray = [];

getDataFromLocalStorage();

button.addEventListener("click", () => {
  if (state.value !== "state?") {
    addToArray({
      state: state.value,
      reason: why.value,
    });
    why.value = "";
    state.value = "state?";
  }
});

function addToArray(dataObject) {
  sArray.push(dataObject);
  addToTable(dataObject);
  addDataToLocalStorage();
}
function addDataToLocalStorage() {
  window.localStorage.setItem("states", JSON.stringify(sArray));
}

function addToTable(dataObject) {
  const tr = document.createElement("tr");
  const tdstate = document.createElement("td");
  const tdWhy = document.createElement("td");
  const tdDate = document.createElement("td");
  tr.appendChild(tdstate);
  tr.appendChild(tdWhy);
  tr.appendChild(tdDate);
  table.appendChild(tr);
  tdstate.innerText = dataObject.state;
  tdWhy.innerText = dataObject.reason;
  tdDate.innerText = cDate;
}

function getDataFromLocalStorage() {
  let data = window.localStorage.getItem("states");
  if (data) {
    sArray = JSON.parse(data);
    for(const row of sArray) {
      addToTable(row);
    } 
  }
}

【讨论】：

一切正常，谢谢。你可以向我解释这部分吗？ ``` for(const row of sArray) { addToTable(row); } ```
for(const row of sArray) { addToTable(row); } 为数组中保存的每个元素调用 addToTable，因为会有多个元素，但 addToTable 只接受一个元素。 developer.mozilla.org/de/docs/Web/JavaScript/Reference/…

【解决方案2】：

存在多个问题。我建议，你应该遵循 SOLID 原则，并根据其工作划分功能。同时，创建变量并与存储同步可能是一个问题。所以直接修改localStorage是个不错的选择。

  const stateBtn = document.querySelector("#state");
    const whyBtn = document.querySelector(".why");
    const addBtn = document.querySelector(".button");
    const table = document.querySelector(".table");

    // Date
    var currentDate = new Date();
    let cDay = currentDate.getDate();
    let cMonth = currentDate.getMonth() + 1;
    let cYear = currentDate.getFullYear();
    let cDate = cMonth + "-" + cDay;

    addBtn.addEventListener("click", () => {
      if (stateBtn.value !== "state?") {
        const row = { reason: whyBtn.value, state: stateBtn.value };
        addDataToLocalStorage(row);
        addToTable(row);
        whyBtn.value = "";
        stateBtn.value = "state?";
      }
    });

    function addDataToLocalStorage(row) {
      const states = [...getDataFromLocalStorage(), row];
      localStorage.setItem("states", JSON.stringify(states));
    }

    function renderTable() {
      const states = getDataFromLocalStorage();
      for (let row of states) {
        addToTable(row);
      }
    }

    function addToTable(row) {
      const tr = document.createElement("tr");
      const tdstate = document.createElement("td");
      const tdWhy = document.createElement("td");
      const tdDate = document.createElement("td");
      tr.appendChild(tdstate);
      tr.appendChild(tdWhy);
      tr.appendChild(tdDate);
      table.appendChild(tr);
      tdstate.innerText = row.state;
      tdWhy.innerText = row.reason;
      tdDate.innerText = cDate;
    }
    function getDataFromLocalStorage() {
      let data = localStorage.getItem("states") || "[]";
      return JSON.parse(data);
    }
    renderTable();

【讨论】：