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代码
Sep 17 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
Python中__new__与__init__方法的区别详解
2015/05/04 Python
浅析Python基础-流程控制
2016/03/18 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
《老山界》教学反思
2014/04/08 职场文书
专项法律服务方案
2014/06/11 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
入党申请书怎么写?
2019/06/21 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
python办公自动化之excel的操作
2021/05/23 Python
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
idea下配置tomcat避坑详解
2022/04/12 Servers