使用localStorage实现记住密码的操作
Posted 五花肉三七分
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用localStorage实现记住密码的操作相关的知识，希望对你有一定的参考价值。
一：分析问题
- 问题表述很清晰，这里是实现一个类似于表单中记住密码的操作。使用localStorage完成操作，最终效果是当处于记住密码状态时，刷新页面，表单中直接显示信息。
二：解决问题
- 搭建html表单代码结构
- 编写实现具体功能的js文件
- 使用localStorage的相关属性方法完成功能
- 刷新页面，达到记住密码的效果
三：代码实现
html：
<!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>记住密码</title>
<style>
*
margin: 0;
padding: 0;
.body
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.center-input
width: 300px;
height: 400px;
border: 1px solid;
border-radius: 5px;
box-shadow: 2px 1px 1px black;
display: flex;
justify-content: center;
align-items: center;
.check-input
display: flex;
justify-content: center;
align-items: center;
.checkbox-input
margin: 5px;
</style>
<script src="./rempwd.js"></script>
</head>
<body>
<div class="body">
<div class="center-input">
<div class="input-content">
<div class="username-input">
请输入用户名：<input class="username" type="text">
</div>
<div class="password-input">
请再输入密码：<input class="password" type="password">
</div>
<div class="check-input">
是否记住用户名密码:<input class="checkbox" type="checkbox">
</div>
</div>
</div>
</div>
</body>
</html>js：
window.onload = function()
var username = document.querySelector('.username');
var password = document.querySelector('.password');
var checkbox = document.querySelector('.checkbox');
checkbox.addEventListener('change',function()
if(this.checked)
localStorage.setItem('username',username.value);
localStorage.setItem('password',password.value)
else
localStorage.removeItem('username')
localStorage.removeItem('password')
)
if(localStorage.getItem('username') && localStorage.getItem('password'))
username.value = localStorage.getItem('username')
password.value = localStorage.getItem('password')
checkbox.checked = true
四：效果展示
当点击记住密码时，表单信息会存入localstorage本地存储中，这时刷新页面，就会记住原先表单信息并展示。
五：代码优化
以上是关于使用localStorage实现记住密码的操作的主要内容，如果未能解决你的问题，请参考以下文章