CODEWITHSUNDEEP
javascripthtml
McraftGamer06
McraftGamer06

Reputation: 3

Javascript Local Storage Not Storing Everything

So I want to add local storage to this project but it's only saving the first 2 checkboxes, not all of them. I want to make a habit tracker and you are to check off the days you complete and so when you reload the page, the days you have completed a habit are checked off. so far I only have the basic layout of the page without the actual habit part or the styling. I'm trying to work on the checkbox part first.

Any help will be appreciated. Code is below:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Local Storage Test</title>
  </head>
  <body>
    <!-- <p>Last Saved Item: <span id="saved">_____</span></p>
    <input id="username" type="text"></input>
    <button onclick="store()">Save</button>
    <br><br>
    <p id="confirm"></p> -->
    <h2 id="Haading">Habbit Tracker</h2><br>
    <div class="habbits">
      <input type="text" placeholder="Enter A Habbit Here"><button class="add" onclick="add()">Add</button><br><br>
    </div>
    <div class="days">
    <input onclick="save()" type="checkbox" id="Mon">Monday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Tue">Tuesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Fri">Thursday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sun">Friday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sat">Saturday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sun">Sunday</input>
    </div>

    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

Javascript

function save(){
    var checkbox1 = document.getElementById('Mon');
    localStorage.setItem('monday', checkbox1.checked);

    var checkbox2 = document.getElementById('Tue');
    localStorage.setItem('tuesday', checkbox2.checked);

    var checkbox3 = document.getElementById('Wed');
    localStorage.setItem('wednesday', checkbox3.checked);

    var checkbox4 = document.getElementById('Thu');
    localStorage.setItem('thursday', checkbox4.checked);

    var checkbox5 = document.getElementById('Fri');
    localStorage.setItem('friday', checkbox5.checked);

    var checkbox6 = document.getElementById('Sat');
    localStorage.setItem('saturday', checkbox6.checked);

    var checkbox7 = document.getElementById('Sun');
    localStorage.setItem('sunday', checkbox7.checked);
}

function load(){
    var checked1 = JSON.parse(localStorage.getItem('monday'));
    document.getElementById("Mon").checked = checked1;

    var checked2 = JSON.parse(localStorage.getItem('tuesday'));
    document.getElementById("Tue").checked = checked2;

    var checked3 = JSON.parse(localStorage.getItem('wednesday'));
    document.getElementById("Wed").checked = checked3;

    var checked4 = JSON.parse(localStorage.getItem('thursday'));
    document.getElementById("Thu").checked = checked4;

    var checked5 = JSON.parse(localStorage.getItem('friday'));
    document.getElementById("Fri").checked = checked5;

    var checked6 = JSON.parse(localStorage.getItem('saturday'));
    document.getElementById("Sat").checked = checked6;

    var checked7 = JSON.parse(localStorage.getItem('sunday'));
    document.getElementById("Sun").checked = checked7;
}

load();

Upvotes: 0

Views: 47

Answers (1)

Didier Prophete
Didier Prophete

Reputation: 2031

This ids for these 3 input fileds are wrong.

    <input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Fri">Thursday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sun">Friday</input>
    <br>

So you js code throws an error here:

document.getElementById("Wed").checked = checked3;

Change your html to:

    <input onclick="save()" type="checkbox" id="Wed">Wednesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Thu">Thursday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Fri">Friday</input>
    <br>

and it will work

Upvotes: 2

Related Questions