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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
表格 隔行换色升级版
Nov 07 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
谈谈对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
如何开始收听短波广播
2021/03/01 无线电
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python下载微信公众号相关文章
2019/02/26 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
校园文明倡议书
2014/05/16 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
先进人物事迹材料
2014/12/29 职场文书
趣味运动会开幕词
2015/01/28 职场文书
年终工作总结范文
2019/06/20 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Python中requests库的用法详解
2022/06/05 Python