js实现记住账号密码—

实现的原理？
操作cookie，通过判断是否勾选了记住密码框，设置cookie内容，达到保存用户名和密码的效果。
什么时cookie？
cookie有4kb大小，超出长度会返回空字符串；
cookie存放在客户端，可以方便的修改查看，所以不能用cookie存放重要信息；
cooki生命周期会在关闭浏览器以后结束，如果要在一段事件内使用，我们可以为cookie设置有效时间；

Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的都已废弃，最新取代的规范是 RFC6265 [1] 。（可以叫做浏览器缓存）
——引用自百度百科

如何设置、读取、删除cookie？
session是运行在服务器端的，因此我们不能用js直接来设置它；但是cookie是运行在客户端的，我们可以使用js来操作。
cookie的结构：cookie是以键值对保存的，即key=value，它们以“；”进行分隔；
js设置cookie:例如用户名（“tom）的值要保存在cookie中，对应的js代码为document.cookie=“name=”+username;
js读取cookie：
假设cookie中存储的内容为：name=jack;password=123
则在B页面中获取变量username的值的JS代码如下：
var username=document.cookie.split(";")[0].split("=")[1];
js删除cookie：
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可

下面贴出代码：

<body><div>用户名：<input type="text" id="username" value=""><br />密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="password"><br /><input type="checkbox" id="rember" check="true">记住密码<button type="submit" id="dl">登陆</button></div><script>window.onload = function(){var name = document.getElementById("username");var pswd = document.getElementById("password");var dl = document.getElementById("dl");var orember = document.getElementById("rember");
//      var cuser = document.cookie = "user"+"="+name.value+";";
//      var cpswd = document.cookie = "password"+"="+pswd.value+";";//页面初始化时，如果帐号密码cookie存在则填充if(getCookie('username')&& getCookie('password')){name.value = getCookie('username');pswd.value = getCookie('password');orember.checked = true;}//复选框勾选状态发生改变时，如果未勾选则清除cookieorember.onchange = function(){if(!this.checked){delCookie('username');delCookie('password');}else{tips.style.display = "black";}}//表单提交事件触发时，如果复选框是勾选状态则保存cookiedl.onsubmit =function(){if(remember.checked){ setCookie('username',name.value,7); //保存帐号到cookie，有效期7天setCookie('password',pswd.value,7); //保存密码到cookie，有效期7天}}};//设置cookiefunction setCookie(name,value,day){var date = new Date();date.setDate(date.getDate() + day);document.cookie = name + '=' + value + ';expires='+ date;};//获取cookiefunction getCookie(name){var reg = RegExp(name+'=([^;]+)');var arr = document.cookie.match(reg);if(arr){return arr[1];}else{return '';}};//删除cookiefunction delCookie(name){setCookie(name,null,-1);}</script>
</body>

js实现记住账号密码——学习笔记相关推荐

账号密码代码php,JS代码怎样实现记住账号密码
这次给大家带来JS代码怎样实现记住账号密码,JS代码实现记住账号密码的注意事项有哪些,下面就是实战案例,一起来看一下. 很多登录功能上都有个"记住密码"的功能,其实无非就是对coo ...
android 记住多个账号,Android实现记住账号密码功能
本文实例为大家分享了Android实现记住账号密码的具体代码,供大家参考,具体内容如下布局一个复选框 android:id="@+id/checkbox" android:ra ...
Jsp使用Cookie完成记住账号密码的功能
网站中对于记住账号密码,方便下次登录的使用非常普遍,那么它是怎么实现的呢? 首先他的流程是,设计一个复选框,当选中复选框时,就会传值到处理页面,复选框的用途就是判断用户是否愿意记住账号密码. 我们通过 ...
C# ASP.NET MVC:使用Cookie记住账号密码
MVC记住账号密码使用cookie操作前端: 1 <div> 2 用户名:<input type="text" id="UserName" ...
uni-app 实现记住账号密码功能
1.示例: 2.代码: 只看核心代码块其他不用管 <template><view class="page"><view class="to ...
QT 记住账号密码登录
弄了个简单的记住账号密码登录功能,适合初学者学习,直接上代码,代码有注释. 喂饭到嘴边了,看你会不会吃啦开发环境是VS2015 1.由于没有写注册功能,所以账号和密码我提前写在一个ini文件,这个文 ...
Vue实现登录记住账号密码功能的思路与过程
文章来源: 学习通http://www.bdgxy.com/ 目录实现思路这里有三种方法来存储账号密码: 功能界面记住账号密码功能的具体实现密码加密 localStorage cookies ...
android中注册的账号密码储存在,Android中使用SharedPreferences完成记住账号密码的功能...
效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 SharedPreferences会记录CheckBox的状态,如 ...
利用SharedPreferences完成记住账号密码的功能
利用SharedPreferences完成记住账号密码的功能效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 Sh ...

js实现记住账号密码——学习笔记

js实现记住账号密码——学习笔记相关推荐

最新文章

热门文章