时间戳

首页 > 解决方案 > localStorage 供用户和新用户使用（学习目的）

javascript - localStorage 供用户和新用户使用（学习目的）

问题描述

经过几个小时的研究，我仍然没有发现我应该如何将新用户存储在localStorage.

我有 2 个页面：1 个用于登录，1 个用于注册，如下所示：

<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email id"/>
<button>Create</button>
<p class="message">Already Registered? <a href="#">Login</a></p>
</form>


<form class="login-form">
<input type="text" placeholder="user name"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#"> Register </a></p>
</div>
</div>

现在我正在尝试将新注册的用户（为了使用它们进行登录）存储为localStorage这样的：

userData = {
    firstName: 'John',
    lastName: 'Smith',
    email: 'admin@gmail.com',
    password: '123456789'
},
adminData;



localStorage.setItem('userData', JSON.stringify(userData));
adminData = JSON.parse(localStorage.getItem('userData'));

但不幸的是，我找不到任何想法。我知道在客户端存储敏感数据不是一个好主意，但这只是为了学习目的。

谢谢

标签： javascripthtmllocal-storage

解决方案

您所做的是正确的，但是要检查变量值，请尝试使用警报而不是控制台，因为我认为您无法正确查看数据，甚至无法转到开发人员工具，应用程序选项卡。如果你能分享你的完整代码，也许我可以帮你。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="login-page">
      <div class="form">
        <form class="register-form">
          <input id="username" type="text" placeholder="name"/>
          <input id="passcode" type="password" placeholder="password"/>
          <input id="email" type="text" placeholder="email id"/>
          <button onclick="addToLocal()">Create</button>
          <p class="message">Already Registered? <a href="#">Login</a></p>
        </form>

        <form class="login-form">
          <input type="text" placeholder="user name"/>
          <input type="password" placeholder="password"/>
          <button>login</button>
          <p class="message">Not registered? <a href="#"> Register </a></p>
        </form>
      </div>
    </div>
  <script>
    function addToLocal() {
      var username = document.getElementById('username').value;
      var passcode = document.getElementById('passcode').value;
      var emailAddress = document.getElementById('email').value;
      var userDetails = {
        "username": username,
        "passcode": passcode,
        "emailAddress": emailAddress,
      }
      localStorage.setItem("userDetails", JSON.stringify(userDetails));
    }
  </script>
  </body>
</html>

推荐阅读