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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
domReady的实现案例
Nov 23 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
JavaScript常用工具函数大全
May 06 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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
我的论坛源代码(四)
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
PHP实现递归的三种方法
2020/07/04 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python del()函数用法
2013/03/24 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
骨干教师培训制度
2014/01/13 职场文书
初一科学教学反思
2014/01/27 职场文书
数学教育专业求职信
2014/07/22 职场文书
生物学专业求职信
2014/07/23 职场文书
个人委托书如何写
2014/09/25 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
安全保证书怎么写
2015/02/28 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android