javascript cookie基础应用之记录用户名的方法


Posted in Javascript onSeptember 20, 2016

本文实例讲述了javascript cookie基础应用之记录用户名的方法。分享给大家供大家参考,具体如下:

前面有一篇关于cookie基础的文章,封装了 cookie.js,下面我们通过一个实例来应用这个 js。

最常见的就是记住用户名,当用户登录过一次后,通过 cookie 记录下该用户的账号和密码,这样下次打开页面的时候不用再次输入账号密码了。附上代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>cookie的应用——记住用户名</title>
</head>
<body>
  <form action="#" id="myform">
    <label for="username">用户名:</label><input type="text" name="username" id="username" />
    <label for="userpass">密码:</label><input type="password" name="userpass" id="userpass" />
    <input type="submit" value="登录" />
    <a href="javascript:;">清除记录</a>
  </form>
</body>
</html>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
window.onload = function(){
  var oForm = document.getElementById('myform');
  var oTxt1 = document.getElementById('username');
  var oTxt2 = document.getElementById('userpass');
  var oClear = document.getElementsByTagName('a')[0];
  oTxt1.value = getCookie('username');
  oTxt2.value = getCookie('userpass');
  oForm.onsubmit = function(){
    setCookie('username',oTxt1.value,30);
    setCookie('userpass',oTxt2.value,30);
  }
  oClear.onclick = function(){
    removeCookie('username');
    removeCookie('userpass');
    oTxt1.value = '';
    oTxt2.value = '';
  }
}
</script>

PS:这里再把前文中的那段cookie.js贴出来方便大家查看:

function setCookie(name,value,hours){
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}
function getCookie(name){
 var arr = document.cookie.split('; ');
 for(var i = 0; i < arr.length; i++){
  var temp = arr[i].split('=');
  if(temp[0] == name){
   return temp[1];
  }
 }
 return '';
}
function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + '=1; expires=' + d.toGMTString();
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript中this详解
Sep 01 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 #Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 #Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 #Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 #Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 #Javascript
js Canvas实现圆形时钟教程
Sep 19 #Javascript
Bootstrap模态框调用功能实现方法
Sep 19 #Javascript
You might like
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
浅析Python迭代器的高级用法
2020/07/16 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
关于礼仪的演讲稿
2014/01/04 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
经典广告词大全
2014/03/14 职场文书
文明工地标语
2014/06/16 职场文书
超市创业计划书
2014/09/15 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
Java常用函数式接口总结
2021/06/29 Java/Android
如何用Python搭建gRPC服务
2021/06/30 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python