Javascript使用输入更改密码答案

【问题标题】：Javascript change password by using an inputJavascript使用输入更改密码
【发布时间】：2018-07-20 14:19:50
【问题描述】：

我是 Javascript 新手，我想编写一个代码，在其中打开一个窗口，要求用户输入特定密码。如果密码正确，那么他“进入”页面。在页面中，他可以找到一个输入和一个按钮。他可以通过填写输入然后按提交按钮来更改密码。基本上是改变变量的值。问题是我不知道如何将 id="changePass" 的输入“传递”给变量 pass1，然后我不确定是否会保存新密码。先感谢您！您可以在下面找到我的代码：

<html>
<body>
<script>
var entered = false;
var password;
var pass1="pass";
if (entered == false) {
password = prompt('Enter your password in order to view this page!', ' ');
if (password == pass1) {
alert('Correct Password, Enter the Club');
entered = true;
} else {
window.location = "";
}
} else if (entered == true) {
alert('You have already entered the password. Click OK to enter!');
}
</script>
    <input id="changePass"/>
    <button id="subimt" type"Submit">Submit</button>
</body>
</html>

【问题讨论】：

永远不要在前端执行安全验证，如果您完全关心真正的安全性。
好吧，我希望这只是一个学习练习，因为它不是很安全。但是为了保存密码，你需要一个地方来保存它。由于您无法更改文档，因此您需要使用 localstorage 或 cookie 之类的东西。但实际上，密码应该在用户看不到的服务器端。
我猜这是某种家庭作业吧？所以让我们从头开始。如果用户更改输入 changePass 并按下 subimt 按钮将 pass1 变量设置为新值，则您设置了 pass1 变量。现在你的得救是什么意思？如果用户刷新您希望他使用新密码登录的页面？如果是，您正在寻找类似浏览器本地存储的东西，因为您似乎没有后端和数据库？
首先感谢您的回答。首先，老实说，我不知道不应该在前端执行验证，但这听起来合乎逻辑。如果这是唯一的方法，我将尝试查找有关本地存储和 cookie 的信息。 @Anastasios Selmanis 首先这不是功课，是的，只要用户按下提交按钮，密码就会被保存，然后如果他刷新页面，他必须输入他分配给变量的新密码。

标签： javascript jquery html angularjs

【解决方案1】：

我的朋友，您不能依赖浏览器存储和 cookie 来登录用户并保存密码。最小的问题是，如果用户清除了他的 cookie 和历史记录，您将失去一切。 :)

这就是为什么我问这是否是一项家庭作业，或者至少是您并不真正关心保留用户凭据的事情，并且您的用户每次重新输入默认密码不会有任何问题同时。

下面说的是您要将密码存储到local storage的代码

<input id="changePass"/>
<button id="changePassBtn" type"Button" onclick='changePassBtnClick()'>Change Password</button>


<input id="login"/>
<button id="loginBtn" type"Button" onclick='loginBtnClick()'>Login</button>


<script>
    if(!localStorage.getItem('password')){
      localStorage.setItem('password', 'pass');
    }

    function changePassBtnClick(){
      localStorage.setItem('password', document.getElementById('changePass').value);
      alert('Password changed');
    }

    function loginBtnClick(){
      if(document.getElementById('login').value == localStorage.getItem('password')){
        alert('Correct Login');
      }else{
        alert('Wrong Password');
      }
    }
    </script>

【讨论】：

首先感谢您回答我的想法，但根据您告诉我的情况，这基本上是一个错误的决定，将密码存储在前端。至少我在这个问题上学到了几个问题，这意味着本地存储以及我必须在哪里执行安全验证！