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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jquery map方法使用示例
Apr 23 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
学习Vue组件实例
Apr 28 Javascript
js之ajax文件上传
May 13 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
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python集合常见运算案例解析
2019/10/17 Python
Python实现异步IO的示例
2020/11/05 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
社区矫正工作方案
2014/06/04 职场文书
死亡证明书样本说明
2014/10/18 职场文书
个人借款协议书范本
2014/11/17 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
工作简报格式范文
2015/07/21 职场文书
初中政治教学反思
2016/02/23 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技