html实现记住账号、记住密码功能

效果图：

1.页面添加记住账号、记住密码多选框

<div class="remember" style="text-align: center;margin: 10px auto;"><input type="checkbox" id="rem_username">记住账号<input type="checkbox" id="rem_password">记住密码
</div>

2.编写js，监听用户名、密码输入框id

document.querySelector用户获取单个元素，addEventListener去监听多选框是否发生改变，判断是否进行填充用户名、密码。

<script type="text/javascript">var u_name = document.querySelector('#username');var u_pass = document.querySelector('#password');var rem_username = document.querySelector('#rem_username');var rem_password = document.querySelector('#rem_password');if (localStorage.getItem('u_name')) {u_name.value = (localStorage.getItem('u_name'))rem_username.checked = true;}if (localStorage.getItem('u_pass')) {u_pass.value = (localStorage.getItem('u_pass'))rem_password.checked = true;}rem_username.addEventListener('change',function () {if (this.checked) {localStorage.setItem('u_name', u_name.value);} else {localStorage.removeItem('u_name');}})rem_password.addEventListener('change',function () {if (this.checked) {localStorage.setItem('u_pass', u_name.value);} else {localStorage.removeItem('u_pass');}})
</script>

【html实现记住账号、记住密码功能】相关推荐

用Javascript实现记住账号和密码
用Javascript实现记住账号和密码正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教在我们日常使用app以及网站时,通常会遇见浏览器自动储存用户的账号密码等相关情况,那么, ...
记住用户名密码html,jQuery实现的记住帐号密码功能完整示例
本文实例讲述了jQuery实现的记住帐号密码功能.分享给大家供大家参考,具体如下: 记住密码是每个有帐号登录的网站必备的,现在说一下通过COOKIE实现的记住密码功能. COOKIE //读取cook ...
android怎么实现记住密码功能,安卓实现记住用户名和密码功能
开发步骤: 在程序布局中键入复选框在LoginActivity类中加入登陆处理的方法 3.在 LoginActivity类中加入是否记住密码的判断方法 4.运用SharedPreferences进行 ...
html 记住账号,浏览器功能记住账号和密码解决方法（HTML解决方式）
1.在input标签里应用html5的新特性autocomplete="off" 注:对chrome不管用.其他浏览器没试. 2.如果是一个输入框那就在当前input标签后面(一 ...
前端 input type=“password“ 实现禁止浏览器记住账号、密码的功能
方法一 name="zzzz" 保持一致, 多写几个input 隐藏 , autocomplete="off" <el-input v-show=&quo ...
设置让TortoiseGit记住账号和密码
方法一:在"C:\Documents and Settings\Administrator\.gitconfig" 文件或 "项目/.git/config"文 ...
android中注册的账号密码储存在,Android中使用SharedPreferences完成记住账号密码的功能...
效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 SharedPreferences会记录CheckBox的状态,如 ...
利用SharedPreferences完成记住账号密码的功能
利用SharedPreferences完成记住账号密码的功能效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 Sh ...
android 记住多个账号,Android实现记住账号密码功能
本文实例为大家分享了Android实现记住账号密码的具体代码,供大家参考,具体内容如下布局一个复选框 android:id="@+id/checkbox" android:ra ...
java记住密码 cookie_Java Web网站怎么利用Cookie实现记住密码功能
在做java web网站开发时,为了避免每次登录都需要输入用户名和密码,我们会使用Cookie技术来实现记住密码功能,在这里小编使用简单的项目案例来教大家具体的实现过程. 前期准备 1.下载好jque ...

【html实现记住账号、记住密码功能】

html实现记住账号、记住密码功能

1.页面添加记住账号、记住密码多选框

2.编写js，监听用户名、密码输入框id

【html实现记住账号、记住密码功能】相关推荐

最新文章

热门文章