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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
js函数调用常用方法详解
2012/12/03 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
目前最全的python的就业方向
2018/06/05 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python环境下安装opencv库的方法
2020/03/05 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
粗加工管理制度
2014/02/04 职场文书
交通事故协议书范本
2014/11/18 职场文书
个人廉政承诺书
2015/04/28 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
女儿满月酒致辞
2015/07/29 职场文书