CODEWITHSUNDEEP
javascripthtmllocal-storage
Muneeba Dilawaze
Muneeba Dilawaze

Reputation: 115

How to get Values of array from local storage and display it

I am trying to display an array from local storage but after refreshing the page when I hit the save button again the previous entries in local storage are replaced by the new ones and are not working correctly.

Js file:

let count = 0;
let countStr = []

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let resetBtn = document.getElementById("reset-btn")
let saveBtn = document.getElementById("save-btn")
let incrementBtn = document.getElementById("increment-btn")
const entriesFromLocalStorage = JSON.parse(localStorage.getItem("entries"))


saveEl.innerHTML = entriesFromLocalStorage


incrementBtn.addEventListener("click" , function(){
    count = count + 1 ;
    countEl.innerHTML = count;
})


saveBtn.addEventListener("click" , function(){
    countStr.push(count)
    saveEl.innerHTML = countStr
    localStorage.setItem("entries", JSON.stringify(countStr))
     count = 0;
    countEl.innerHTML = 0;


})


resetBtn.addEventListener("click" , function(){
    saveEl.innerHTML = "";
    localStorage.clear()
})

HTML file:

<h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn">INCREMENT</button>
    <button id="save-btn">SAVE</button>
    <div class="entries">
        <p class="prev-ent">Previous entries:</p>
        <p id="save-el"></p>
    </div>
    <button id="reset-btn">Reset entries</button>
    <script src="index.js"></script>

Upvotes: 0

Views: 791

Answers (2)

Ferin Patel
Ferin Patel

Reputation: 3968

You can keep track of current and previous values in an object and store that object in local storage when you click save and retrieve same object when page loads.

Link to CodeSandBox

let count = 0;
let countStr = [];

let saveEl = document.getElementById("save-el");
let countEl = document.getElementById("count-el");
let resetBtn = document.getElementById("reset-btn");
let saveBtn = document.getElementById("save-btn");
let incrementBtn = document.getElementById("increment-btn");
const entriesFromLocalStorage = JSON.parse(localStorage.getItem("entries")) || {
  current: 0,
  previous: []
};

console.log(entriesFromLocalStorage);

saveEl.innerHTML = entriesFromLocalStorage.previous.toString() || 0;

incrementBtn.addEventListener("click", function() {
  count = count + 1;
  countEl.innerHTML = count;
});

saveBtn.addEventListener("click", function() {
  console.log(entriesFromLocalStorage, "At Save");

  countStr.push(count);
  saveEl.innerHTML = countStr;
  entriesFromLocalStorage.current = count;
  entriesFromLocalStorage.previous.push(count);
  localStorage.setItem("entries", JSON.stringify(entriesFromLocalStorage));
  count = 0;
  countEl.innerHTML = 0;
});

resetBtn.addEventListener("click", function() {
  saveEl.innerHTML = "";
  localStorage.clear();
});
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">INCREMENT</button>
<button id="save-btn">SAVE</button>
<div class="entries">
  <p class="prev-ent">Previous entries:</p>
  <p id="save-el"></p>
</div>
<button id="reset-btn">Reset entries</button>

Link to CodeSandBox

Upvotes: 1

Wang Liang
Wang Liang

Reputation: 4434

let count = 0;
let countStr = []

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let resetBtn = document.getElementById("reset-btn")
let saveBtn = document.getElementById("save-btn")
let incrementBtn = document.getElementById("increment-btn")
const entriesFromLocalStorage = JSON.parse(localStorage.getItem("entries") || '[]')

// This is important
countStr = entriesFromLocalStorage;

saveEl.innerHTML = entriesFromLocalStorage


incrementBtn.addEventListener("click", function () {
    count = count + 1;
    countEl.innerHTML = count;
})


saveBtn.addEventListener("click", function () {
    countStr.push(count)
    saveEl.innerHTML = countStr
    localStorage.setItem("entries", JSON.stringify(countStr))
    count = 0;
    countEl.innerHTML = 0;


})


resetBtn.addEventListener("click", function () {
    saveEl.innerHTML = "";
    localStorage.clear()
})

Upvotes: 1

Related Questions