Why does my program freeze when ever I hit the login button

问题

so I have this program that makes it so you can password protect bookmarks by putting it as a link and saving it in localStorage. The thing is when I hit the login button (which checks if you have the correct username and password) and have the correct username and password the program freezes and I can't figure out why. the localStorage.getItem('number') is set to 0.

function increment() {
  var num = parseInt(localStorage.getItem('number'), 10);
  num++;
  localStorage.setItem('number', num.toString());
  return num.toString();
}

function read() {
    return localStorage.getItem('number');
}

function registerScreen() {
    $("body").html("<input id='u2' autocomplete='off' placeholder='username'><br><input id='p2' type='password' autocomplete='off' placeholder='password'><br><button onclick='register()'>create account</button>")
    var num = parseInt(localStorage.getItem('number'), 10);
    for (var i = 0; i <= num; i++) {
        localStorage.removeItem(i.toString());
    }
    localStorage.setItem('number', '0')

}

function loginScreen() {
    if (localStorage.getItem('password') == null || localStorage.getItem('username') == null) {
        alert("you do not seem to have an account")
        registerScreen();
    }
    $("body").html("<input id='u' autocomplete='off' placeholder='username'><br><input id='p'type='password' autocomplete='off' placeholder='password'><br><button onclick='login()'>login</button>")
}

function login() {
    if (localStorage.getItem('username') === $('#u').val() && localStorage.getItem('password') === $('#p').val()) {
        $("body").html("<h1>Hello " + localStorage.getItem('username') + " </h1><br><button onclick='add()'>add a bookmark</button>")
        place();
    }
}

function register() {
    localStorage.setItem('username', $("#u2").val())
    localStorage.setItem('password', $("#p2").val())
    $("body").html("<h1>Hello " + localStorage.getItem('username') + "</h1><br><button onclick='add()'>add a bookmark</button>")
}

function add() {
    var word = prompt("What would you like to see as your link");
    var href = prompt("where would you like to have the link to go");
    var a = "<a href='https://" + href + "' target='_blank'>" + word + "</a>";
    $("body").append(a + "<br>")
    localStorage.setItem(increment(), a.toString());
}

function place() {
    var x = parseInt(read(), 10);
    for (var i = 1; i <= x; i++) {
        $("body").append(localStorage.getItem(i.toString()) + "<br>");
    }
}

<button onclick="loginScreen()">login</button>
<button onclick="registerScreen()">register</button>

回答1:

You have an infinite loop here:

  for (var i = 0; i <= parseInt(n(), 10); i++) {
    $("body").append(localStorage.getItem(i.toString()));
  }

Every time you call n() it fetches the number item from localStorage and increments it. So each time through the loop, n() returns a higher number, and i will never catch up to it.

You should just call n() once.

let count = parseInt(n(), 10);
for (let i = 0; i <= count; i++) {
  $("#body").append(localStorage.getItem(i.toString());
}

I'm also not sure why you're incrementing the number in n(). You should only do that when you're saving a new item, not when you're just reading them.

回答2:

I managed to get out any bugs I saw in the program. If you wish to try the program out here is the link

来源：https://stackoverflow.com/questions/59002924/why-does-my-program-freeze-when-ever-i-hit-the-login-button

标签

javascript

local-storage