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 相关文章推荐
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
使用js画图之饼图
Jan 12 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
Node.js+ELK日志规范的实现
May 23 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP网络操作函数汇总
2015/05/18 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python3中property使用方法详解
2019/04/23 Python
python实现超级马里奥
2020/03/18 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
名人演讲稿范文
2013/12/28 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2014年测量员工作总结
2014/12/12 职场文书
村官个人总结范文
2015/03/03 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL