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制作日历控件
Jul 17 Javascript
论JavaScript模块化编程
Mar 07 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python实现读取并保存文件的类
2017/05/11 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
给护士表扬信
2014/01/19 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
MySQL创建管理HASH分区
2022/04/13 MySQL
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL