我怎样才能通过js保护我的index.html网站所以我只能在我的电脑上打开它？

Question

i want to make my local static html website password protected with some js, so that when i open my local html file in my pc, it comes with a form to fill up my user id and my own password, which i have saved and when i hit enter that should open my index.html file only when password is correct.我想让我的本地 static html 网站密码用一些 js 保护，这样当我打开我的本地 html 文件时，它带有我自己的密码，当我在我的电脑中填写我的用户名和我的密码时只有当密码正确时，我才按回车键打开我的 index.html 文件。 currently my code is目前我的代码是

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <Form>
    <!-- user-id -->
    <input type="text">
    <!-- user-password -->
    <input type="password">

    <button onclick="window.open('./index.html')"> Enter
    </button>
    </Form>
    <script>
    //   pls-help-me-idk-how-to-code-js
    </script>
    </body>
    </html> ``

Answer 1

Its not a proper way to do it.这不是一个正确的方法。 You need a backend for that inorder to properly execute that.您需要一个后端才能正确执行它。 But if it just to play around you can have an alert box and just compare their value: if right it displays.但如果它只是为了玩，你可以有一个警告框并比较它们的值：如果正确，它会显示。

Answer 2

First, you have to add an id or a class to that inputs in order to select them within the script section.首先，您必须在该输入中添加一个 id 或 class 以便在脚本部分中对它们进行 select 。 Afterward, you can select them and add any value you want.之后，您可以对它们进行 select 并添加您想要的任何值。 Such as:如：

<form>
  <!-- user-id -->
  <input id="user" type="text" />
  <!-- user-password -->
  <input id="pass" type="password" />

  <button onclick="window.open('./index.html')">Enter</button>
</form>
<script>
  document.getElementById("user").value = "UsernameOrId";
  document.getElementById("pass").value = "SomePassword";
</script>

In order to compare, you should get the right password from somewhere like a database or some service, but since this is purely for learning purposes you can hardcode it in the script for checking.为了进行比较，您应该从数据库或某些服务之类的地方获取正确的密码，但由于这纯粹是为了学习目的，您可以在脚本中对其进行硬编码以进行检查。 So, the final solution can be similar to this:因此，最终的解决方案可能与此类似：

<body>
<form>
  <!-- user-id -->
  <input id="user" type="text" />
  <!-- user-password -->
  <input id="pass" type="password" />

  <button id="btn">Enter</button>
</form>
<script>
  const myPass = "SomePassword";
  document.getElementById("user").value = "UsernameOrId"; // predefining the value simulating is saved and by default filled up
  document.getElementById("pass").value = myPass; // predefining the value simulating is saved and by default filled up
  const btn = document.getElementById("btn"); // getting the button to control its behavior on click event
  btn.addEventListener("click", function () {
    const passWhenClickingTheBtn = document.getElementById("pass").value;
    if (myPass === passWhenClickingTheBtn) {  // checking the value entered for pass
      window.open("./index.html");
    }
  });
</script>

我怎样才能通过js保护我的index.html网站所以我只能在我的电脑上打开它？

问题描述

2 个解决方案

解决方案1
1 2022-01-11 12:27:59

解决方案2
1 2022-01-11 12:40:53

我怎样才能通过js保护我的index.html网站所以我只能在我的电脑上打开它？

问题描述

2 个解决方案

解决方案1 1 2022-01-11 12:27:59

解决方案2 1 2022-01-11 12:40:53

解决方案1
1 2022-01-11 12:27:59

解决方案2
1 2022-01-11 12:40:53