Local Storage doesn't work at all!!!

Question

I added local storage to my code and the code still works fine but when I refresh everything disappears when I thought that was the whole point of local storage. When I check the console the variables and local storage seem to be fine but it simply doesnt work. Very confusing to me. Ive been at this for over an hour. Here's the code. Basically when you click "sign in" you get an input and when you type a name and click "sign in" again you should get a file that has the info of the name you typed. This works. But when you refresh it simply vanishes which is why i tried local storage.

let message = '';
let student;
let question;
var i;
let security;
let input;
let returned = false;
let late = false;
let clientInfo;
const libraryAccess = document.getElementById('library');
const user = document.getElementById('user');
function signIn() {
   this.render = function(dialog){
       var winW = window.innerWidth;
       var winH = window.innerHeight;
       var dialogoverlay = document.getElementById('dialogoverlay');
       var dialogbox = document.getElementById('dialogbox');
       dialogoverlay.style.display = "block";
       dialogoverlay.style.height = winH+"px";
       dialogbox.style.left = (winW/2) - (550 * .5)+"px";
       dialogbox.style.top = "100px";
       dialogbox.style.display = "block";
       document.getElementById('dialogboxhead').innerHTML = "Type your first name to see your info:";
       document.getElementById('dialogboxbody').innerHTML = `<input type="text" id="input">`;
       document.getElementById('dialogboxfoot').innerHTML = '<button onclick="alert.ok()" id="sign">Sign In</button>';
       const input = document.getElementById('input');
       const signButton = document.getElementById('sign');
       function signClick() {
         signButton.addEventListener('click', () => {
               security = input.value;
               secure();
         });
       }
       signClick();
   }
this.ok = function(){
  document.getElementById('dialogbox').style.display = "none";
  document.getElementById('dialogoverlay').style.display = "none";
}
}
var alert = new signIn();

user.addEventListener('click', () => {
   alert.render();
});
//Custom Function that replaces document.write with a better alternative
const print = (message) => {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

// These are the categories
const getReport = (student) => {
  let report = `<h1 class="titleName" id="name"> ${student.name} </h1>`;
  `<ol class="lists">`
  report += `<li class="clientLi"> MemberShip: ${student.memberShip} </li>`;
  report += `<li class="clientLi"> MemberSince: ${student.memberSince} </li>`;
  report += `<li class="clientLi"> Points: ${student.points} </li>`;
  report += `<li class="clientLi"> Checking: $${student.checking} </li>`;
  report += `<li class="clientLi"> Debts: ${student.debts} </li>`;
  report += `<li class="clientLi"> Savings: $${student.savings + parseFloat(student.OuncesofSilver * 17.22) + parseFloat(student.goldGrams * 43.02)} </li>`;
  report += `<li class="clientLi"> Ounces of Silver: ${student.OuncesofSilver} </li>`;
  report += `<li class="clientLi"> Books Due: ${student.booksDue} </li>`;
  report += `<li class="clientLi"> GoldGrams: ${student.goldGrams} </li>`;
  `</ol>`
  return report;
}
// Alerts for when something goes above or below certain criteria
const notify = (urgent) => {

  library.addEventListener('click', () => {
      window.location = "library/library.html";
  });

}
//local data
var localData = {
  clientName: 'luke',
  clientName2: 'julie',
  clientName3: 'brendon'
},
data;
localStorage.setItem('localData', JSON.stringify( localData ));
 data = JSON.parse(localStorage.getItem('localData'));
 localStorage.removeItem('clientName');
 localStorage.removeItem('clientName2');
 localStorage.removeItem('clientName3');
// security to only allow person with right password to log into their specific account
function secure() {
    if (security !== null || security !== '' || security !== undefined) {
      if (security === 'luke') {
        clientInfo = data.clientName;
        if (clientInfo === 'luke') {
          var i = 0;
          notify(student);
          message = getReport(students[0]);
          print(message);
        }
      }
      if (security === 'julie') {
        clientInfo = data.clientName2;
        if (clientInfo === 'julie') {
          var i = 1;
          notify(student);
          message = getReport(students[1]);
          print(message);
        }
      }
      if (security === 'brendon') {
        clientInfo = data.clientName3;
        if (clientInfo === 'brendon') {
          var i = 2;
          notify(student);
          message = getReport(students[2]);
          print(message);
        }
      } else {
        clientInfo = '';
        if (clientInfo === '') {

        }
      }
    }
  }
print(message);
print(message);

Answer 1 · 2018-05-08T12:48:09Z

May 8, 2018 12:48pm

I've updated parts of the code compare it with yours I hope it would help because I didn't have the students object I've used the clientInfo in order to prevent an error

user.addEventListener('click', () => { alert.render(); }); //Custom Function that replaces document.write with a better alternative const print = (message) => { var outputDiv = document.getElementById('output'); outputDiv.innerHTML = message; }

// These are the categories const getReport = (student) => { let report = <h1 class="titleName" id="name"> ${student.name} </h1>; <ol class="lists"> report += <li class="clientLi"> MemberShip: ${student.memberShip} </li>; report += <li class="clientLi"> MemberSince: ${student.memberSince} </li>; report += <li class="clientLi"> Points: ${student.points} </li>; report += <li class="clientLi"> Checking: $${student.checking} </li>; report += <li class="clientLi"> Debts: ${student.debts} </li>; report += <li class="clientLi"> Savings: $${student.savings + parseFloat(student.OuncesofSilver * 17.22) + parseFloat(student.goldGrams * 43.02)} </li>; report += <li class="clientLi"> Ounces of Silver: ${student.OuncesofSilver} </li>; report += <li class="clientLi"> Books Due: ${student.booksDue} </li>; report += <li class="clientLi"> GoldGrams: ${student.goldGrams} </li>; </ol> return report; } // Alerts for when something goes above or below certain criteria const notify = (urgent) => {

library.addEventListener('click', () => { window.location = "library/library.html"; });

} //local data var localData = { clientName: 'luke', clientName2: 'julie', clientName3: 'brendon' }

localStorage.setItem('localData', JSON.stringify( localData )); moved the localStorage.getItem up localStorage.removeItem('clientName'); localStorage.removeItem('clientName2'); localStorage.removeItem('clientName3'); // security to only allow person with right password to log into their specific account user.click(); function secure() { if (security !== null || security !== '' || security !== undefined) { if (security === 'luke') { clientInfo = data.clientName; if (clientInfo === 'luke') { var i = 0; notify(clientInfo); message = getReport(clientInfo); print(message); } } if (security === 'julie') { clientInfo = data.clientName2; if (clientInfo === 'julie') { var i = 1; notify(clientInfo); message = getReport(clientInfo); print(message); } } if (security === 'brendon') { clientInfo = data.clientName3; if (clientInfo === 'brendon') { var i = 2; notify(sclientInfo); message = getReport(sclientInfo); print(message); } } else { clientInfo = ''; if (clientInfo === '') {

    }
  }
}

}

print(message); print(message);

Welcome to the Treehouse Community

Looking to learn something new?

brendon hanson

brendon hanson

Local Storage doesn't work at all!!!

1 Answer

Yossi Haver

Yossi Haver