javascript cookie用法基础教程(概念,设置,读取及删除)


Posted in Javascript onSeptember 20, 2016

本文实例讲述了javascript cookie用法。分享给大家供大家参考,具体如下:

一、什么是 cookie?

cookie 就是页面用来保存信息,比如自动登录、记住用户名等等。

二、cookie 的特点

同个网站中所有的页面共享一套 cookie

cookie 有数量、大小限制

cookie 有过期时间

三、如何使用 cookie?

通过 document.cookie 来写入 cookie

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>cookie基础</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
document.cookie = 'username=abc';
document.cookie = 'password=123';
document.cookie = 'email=abcdef@123.com';
</script>

打开浏览器查看 cookie,可以发现新定义的 cookie 并不会将原来的覆盖。

如果没有设置过期时间,那么关闭浏览器就会清空 cookie。如何设置过期时间呢?答案是:expires。一般我们会结合 Date 对象来使用。

var d = new Date();
d.setTime(d.getTime() + 1 * 3600 * 1000);
document.cookie = 'username=abc; expires=' + d.toGMTString();

我们可以通过火狐浏览器看到,username 的过期时间是当前时间的 1 小时后。

最后对获取 cookie 的方法进行封装:

function setCookie(name,value,hours){ 
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}

学会了如何设置 cookie,那么该如何读取 cookie 呢?

首先我们看下 cookie 里的内容是什么类型?

document.cookie = 'username=abc';
document.cookie = 'password=123';
document.cookie = 'email=abcdef@123.com';
typeof document.cookie; //string
alert(document.cookie); //'username=abc; password=123; email=abcdef@123.com'

得到的是一串字符串,需要注意的是,每个 ; 后面都有个空格。

那么我们如何取到具体的数值呢?附上代码:

function getCookie(name){ 
 var arr = document.cookie.split('; ');
 for(var i = 0; i < arr.length; i++){
 var temp = arr[i].split('=');
 if(temp[0] == name){
  return temp[1];
 }
 }
 return '';
}

除了设置、获取 cookie,我们还可以删除 cookie。我们在网上经常看到有清除用户名这样的功能,其实就是用到了清除 cookie。

清除 cookie 其实很简单,只要使过期时间为过去时间就可以了。

function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + '=1; expires=' + d.toGMTString();
}

最后我们将设置、获取、清除 cookie 封装成一个 cookie.js

function setCookie(name,value,hours){ 
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}
function getCookie(name){ 
 var arr = document.cookie.split('; ');
 for(var i = 0; i < arr.length; i++){
 var temp = arr[i].split('=');
 if(temp[0] == name){
  return temp[1];
 }
 }
 return '';
}
function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + '=1; expires=' + d.toGMTString();
}

附:这里再补充一个关于cookie的基础应用:javascript cookie记录用户名

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

Javascript 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
js实现表格字段排序
Feb 19 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
javascript使用call调用微信API
Dec 15 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 #Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 #Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 #Javascript
js Canvas实现圆形时钟教程
Sep 19 #Javascript
Bootstrap模态框调用功能实现方法
Sep 19 #Javascript
javascript实现的上下无缝滚动效果
Sep 19 #Javascript
Angular ng-class详解及实例代码
Sep 19 #Javascript
You might like
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
JSON获取属性值方法代码实例
2020/06/30 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python web框架学习笔记
2016/05/03 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
项目考察欢迎辞
2014/01/17 职场文书
文科生自我鉴定
2014/02/15 职场文书
一体化教学实施方案
2014/05/10 职场文书
启动仪式策划方案
2014/06/14 职场文书
四风问题对照检查材料
2014/09/22 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2014年销售部工作总结
2014/12/01 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
工商行政处罚决定书
2015/06/24 职场文书
小学四年级作文之写景
2019/08/23 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL