(Javascript) 将数据从本地存储添加到 table

Question

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

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>

Answer 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);
    } 
  }
}

Answer 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();

(Javascript) 将数据从本地存储添加到 table

(Javascript) Adding data to table from local storage

html

javascript

local-storage