html用户登录保存用户名,实例8-2 使用localStorage对象保存与读取登录用户名

该博客介绍了一个HTML登录页面的实现,利用localStorage对象来保存和读取用户的登录用户名。当用户输入用户名和密码并选择保存时,这些信息会在浏览器中持久化,下次打开页面时会自动填充。代码中包含两个JavaScript函数,一个用于页面加载时读取数据,另一个用于登录按钮点击事件,处理数据的保存和清除。需要注意的是,localStorage保存的数据在不同浏览器间不共享。
摘要由CSDN通过智能技术生成

1.功能描述

新建一个登录页面,用户在文本框中输入用户名与密码,单击“登录”按钮后,将使用localStorage对象保存登录时的用户名。如果选中“是否保存密码”选项,将保存登录时的密码,否则,将清空原先保存的密码。当重新在浏览器中打开该页面时,经过保存的用户名和密码数据,将分别显示在相应的文本框中。

2.实现代码

在DreamweaverCS5中新建一个HTML页面8-2.html,加入代码如代码清单8-2所示。

代码清单8-2 使用localStorage对象保存与读取登录用户名与密码

使用localStorage对象保存与读取登录用户名与密

登录

  • 名称:

    type="text">

  • 密码:

    type="password">

  • 是否保存密码

  • type="button" onClick="btnLogin_click();">

    type="reset" value="取消">

在代码清单8-2中,页面导入一个JavaScript文件js2.js,其中自定义两个函数,分别在页面加载和单击“登录”按钮时调用。其实现的代码如下所示:

//JavaScript Document

function $$(id){

return document.getElementByld(id);

}

制作一个像QQ一样的用户注册和登录界面通常涉及前端开发技术,如HTML、CSS和JavaScript,特别是配合后端服务器来处理用户的登录信息。由于当前环境是文字交互,我们将提供一个简化版的文字描述以及如何实现基本功能的大致步骤。 **1. HTML结构:** 创建一个包含注册和登录表单的基本HTML结构: ```html <!DOCTYPE html> <html lang="zh"> <head> ... <!-- CSS样式 --> </head> <body> <div id="registerLoginContainer"> <h1>用户注册/登录</h1> <section id="registerSection"> <h2>新用户注册</h2> <!-- 填写用户名和密码部分 --> </section> <section id="loginSection"> <h2>已有账号登录</h2> <!-- 登录表单 --> </section> </div> <!-- JavaScript脚本 --> </body> </html> ``` **2. CSS样式:** 为页面添加样式,使表单看起来更专业。 **3. JavaScript & 数据存储 (本地存储):** 在客户端使用`localStorage`或`sessionStorage`存储用户信息。例如,注册后: ```javascript function saveUser(username, password) { localStorage.setItem('username', username); localStorage.setItem('password', password); } // 注册表单提交时调用此函数 ``` 登录时检查是否存在存储的用户名和密码: ```javascript function loginUser() { const storedUsername = localStorage.getItem('username'); const storedPassword = localStorage.getItem('password'); // 验证后端接口,如存在则跳转到首页 if (storedUsername && storedPassword) { // 调用后台API验证并跳转 } else { alert('未找到登录信息,请重新登录'); } } ``` **4. 后端存储 (仅作演示):** 在服务器端(如Node.js、Python Django等)设置API,用于接收用户数据并持久化到数据库中。这一步需要连接数据库,并根据后端框架不同编写相应代码。 注意:上述示例非常简略,实际应用中你需要考虑安全性和用户体验,例如加密存储密码、验证码、错误提示等。此外,为了保护用户隐私,不应该在前端直接显示明文密码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值