为什么每次点击登录按钮时程序都冻结 [英] Why does my program freeze when ever I hit the login button

问题描述

所以我有这个程序，因此您可以通过将书签作为链接并将其保存在localStorage中来对书签进行密码保护.问题是，当我按下登录按钮(该按钮检查您是否具有正确的用户名和密码)以及具有正确的用户名和密码时，程序将冻结，我不知道为什么.将localStorage.getItem('number')设置为0.

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>

推荐答案

您在这里有无限循环:

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

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

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.

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

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

我也不确定为什么要增加 n()中的数字.仅在保存新项目时才这样做，而不是在阅读它们时才这样做.

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.

这篇关于为什么每次点击登录按钮时程序都冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！