(Javascript) Adding data to table from local storage-CodePudding

Good day, This is some sort of a journal I'm trying to make, the localStorage setItem part is fine, it's the getItem I'm having trouble with, after adding the entries to the table, when I refresh, all of the entries are gone and I'm only left with 1 row with the default input values, ("state?" and "").

JS code:

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

And this is the HTML code

<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>

CodePudding user response：

you call addToTable(states); but this function doesn't accept any parameters function addToTable() {.

and it seams like a problem in your logic.

you write it to sArray but never use this values.

here a blind try, not tested it:

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

CodePudding user response：

There are multiple issues. I would suggest, you should follow the SOLID principle and divide function according to its work. Same time, Instead of creating variables and syncing with storage could be an issue. So directly modifying the localStorage is a good choice.

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