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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 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实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Python过滤序列元素的方法
2020/07/31 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
scrapy头部修改的方法详解
2020/12/06 Python
指针和引用有什么区别
2013/01/13 面试题
办公室主任主任岗位责任制
2014/02/11 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
Nginx配置根据url参数重定向
2022/04/11 Servers
golang语言指针操作
2022/04/14 Golang