javascript - 本地存储不工作

Question

我的代码仍然可以正常工作，但本地存储根本无法工作。然而，它在控制台中说一切都很好。目标是将输入的文本保存到 clientInfo 变量中，以便刷新后保留该信息。当我刷新时，它根本不保存。这是我第一次使用本地存储，所以也许我遗漏了一些明显的东西。任何帮助都会很棒

    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(); // calling secure function here because otherwise the function wont run properly if I place it elsewhere
         });
       }
       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 securityName = '';
 var localData = {
 clientName: 'luke',
 clientName2: 'julie',
 clientName3: 'brendon'
},
data;
 //set Fake local data
 localStorage.setItem('localData', JSON.stringify( localData ));

 //get localstorage
 var data = JSON.parse(localStorage.getItem('localData'));

 //check if data is valid
 if (data != null && typeof data != 'undefined'){
   secure(securityName, data); //call the function passing parameters
 }else{
   window.alert('localStorage is empty');
 }

 function secure() {
   var message = '';
   if (security !== null || security !== '' || security !== undefined) {
       //ADD YOUR CODE FOR SECURITY HERE - FOR TESTING PURPOSES IT WAS REMOVED.
       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 === '') {

         }
       }
   }
 }

 localStorage.removeItem('clientName');
 localStorage.removeItem('clientName2');
 localStorage.removeItem('clientName3');
print(message);
print(message);

Answer 1

好吧，在这里测试，我发现获取 localStorage 值没有问题。

我只看到您有一个名为 secure() 的函数，您从未调用过它，因此它从不检查任何内容...所以我做了一些调整，它似乎工作正常。

请参阅下面的代码:(请记住，StackOverflow 不允许 localStorage，因此，这里会抛出错误)。

这是一个检查它是否正常工作的 fiddle :https://codepen.io/anon/pen/wjPNwo

document.addEventListener('DOMContentLoaded', function() {
  var securityName = '';
  var localData = {
  clientName: 'luke',
  clientName2: 'julie',
  clientName3: 'brendon'
  };
  //set Fake local data
  localStorage.setItem('localData', JSON.stringify( localData ));

  //get localstorage 
  var data = JSON.parse(localStorage.getItem('localData'));

  //check if data is valid
  if (data != null && typeof data != 'undefined'){
    secure(securityName, data); //call the function passing parameters
  }else{
    window.alert('localStorage is empty');
  }

  function secure(security, data) {	
    var message = '';
    if (security !== null || security !== '' || security !== undefined) {
        //ADD YOUR CODE FOR SECURITY HERE - FOR TESTING PURPOSES IT WAS REMOVED.
    }
    message = 'the data stored in localStorage is on the console log, open it with F12 to debug';
    console.log(data);
    document.getElementById('a').innerHTML = message + '<br><br>' +
      data.clientName+'<br>'+
      data.clientName2+'<br>'+
      data.clientName3+'<br>' ;
  }
});