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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
iView框架问题整理小结
Oct 16 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
10款实用的PHP开源工具
2015/10/23 PHP
降低PHP Redis内存占用
2017/03/23 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Python解析最简单的验证码
2016/01/07 Python
Python实现视频下载功能
2017/03/14 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
金融管理专业求职信
2014/07/10 职场文书
八项规定对照检查材料
2014/08/31 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
关于MySQL中explain工具的使用
2023/05/08 MySQL