Локальное хранилище не работает - PullRequest
0 голосов
/ 07 мая 2018

Мой код все еще работает как обычно, но локальное хранилище не работает вообще. Однако в консоли говорится, что все в порядке. Цель состоит в том, чтобы сохранить введенный текст в переменную 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);

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Я обнаружил проблему. Мне нужно было поместить переменную безопасности в локальное хранилище, потому что после обновления переменная будет неопределенной, а переменная clientInfo будет основана на этой переменной.

0 голосов
/ 08 мая 2018

хорошо, тестируя здесь, я не увидел проблем с получением значения localStorage.

Я только видел, что у вас есть функция с именем secure(), которую вы никогда не вызываете, поэтому она никогда ничего не проверяет ... поэтому я внёс некоторые коррективы, и, похоже, она работает нормально.

см. Код ниже: (пожалуйста, имейте в виду, что StackOverflow не разрешает localStorage, поэтому здесь он выдаст ошибку).

А вот скрипка, чтобы проверить, работает ли она: 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>' ;
  }
});
...