javascript - 为什么当我点击登录按钮时我的程序就会卡住

Question

所以我有这个程序，这样您就可以通过将书签作为链接并将其保存在本地存储中来对其进行密码保护。问题是，当我点击登录按钮(检查您是否拥有正确的用户名和密码)并拥有正确的用户名和密码时，程序会卡住，我不明白为什么。 localStorage.getItem('number') 设置为 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>

Answer 1

这里有一个无限循环:

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

每次调用n()时，它都会从localStorage中获取number项并递增它。因此，每次循环时，n()都会返回一个更高的数字，而i永远无法追上它。

您应该只调用 n() 一次。

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

我也不确定为什么要增加 n() 中的数字。您应该只在保存新项目时执行此操作，而不是在阅读它们时执行此操作。