js使用cookie实现记住用户名功能示例


Posted in Javascript onJune 13, 2019

本文实例讲述了js使用cookie实现记住用户名功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3water.com cookie记住用户名</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
 <script>
 //1、cookie的使用:document.cookie = 'key=value';可以同时设置多个
 // document.cookie="username=longzhoufeng"
// document.cookie="age=03"
//2、cookie的过期时间:document.cookie = '名称=值;expires=' + 字符串格式的时间;
// var myDate=new Date()
// myDate.setDate(myDate.getDate()+3)
// document.cookie="mynameis="+encodeURI("longzhoufeng")+ ";expires="+myDate.toGMTString();
// document.cookie="age=30"
// console.log(decodeURI(document.cookie))
// 解码后输出结果如下:
//mynameis=longzhoufeng; age=30
//3、把上面的封装成一个函数,其中有三个参数是在变化的,key值,value值,T时间
function setCookie(key,value,t){
  var myDate=new Date()
  myDate.setDate(myDate.getDate()+t)
  document.cookie=key+"="+value+ ";expires="+myDate.toGMTString();
}
function getCookie(key){
  var arr1 = document.cookie.split('; ');
  for (var i=0; i<arr1.length; i++) {
    var arr2 = arr1[i].split('=');
    if ( arr2[0] == key ) {
      return decodeURI(arr2[1]);
    }
  }
}
function removeCookie(key) {
  setCookie(key, '', -1);
}
// setCookie("myName","longzhoufeng",1)
// console.log(getCookie("myName"))
// console.log(removeCookie("myName"))
// alert(typeof myDate)
// 必须将时间格式转换成字符形式
// alert(typeof myDate.toGMTString());
//4、内容最好编码存放,encodeURI
//alert( encodeURI('你好') );
//alert( decodeURI('%E4%BD%A0%E5%A5%BD') )
 </script>
 <script>
window.onload = function() {
  var oUsername = document.getElementById('username');
  var oLogin = document.getElementById('login');
  var oDel = document.getElementById('del');
  if ( getCookie('username') ) {
    oUsername.value = getCookie('username');
  }
  oLogin.onclick = function() {
    alert('登陆成功');
    setCookie('username', oUsername.value, 5);
  }
  oDel.onclick = function() {
    removeCookie('username');
    oUsername.value = '';
  }
}
 </script>
  <input type="text" id="username" />
    <input type="button" value="登陆" id="login" />
    <input type="button" value="删除" id="del" />
</body>
</html>

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

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
javascript 写类方式之四
Jul 05 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
js模拟微博发布消息
Feb 23 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 #Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 #Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 #Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 #Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 #Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
小程序组件之自定义顶部导航实例
Jun 12 #Javascript
You might like
php入门学习知识点三 PHP上传
2011/07/14 PHP
php格式化金额函数分享
2015/02/02 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP异常处理Exception类
2015/12/11 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
js尾调用优化的实现
2019/05/23 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
一道python走迷宫算法题
2018/01/22 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
大学生入党思想汇报
2014/01/01 职场文书
应届生求职信范文
2014/06/30 职场文书
社区服务活动报告
2015/02/05 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python