JavaScript实现cookie的写入、读取、删除功能


Posted in Javascript onNovember 05, 2015

在没介绍正文之前,先给大家介绍Cookie的基础知识

首先了解什么是cookie

“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。”

cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息。

从JavaScript的角度看,cookie 就是一些字符串信息。这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息。

在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信,所以除了JavaScript以外,服务端的语言(如PHP)也可以存取 cookie。

Cookie 基础知识

cookie 是有大小限制的,每个 cookie 所存放的数据不能超过4kb,如果 cookie 字符串的长度超过4kb,则该属性将返回空字符串。

由于 cookie 最终都是以文件形式存放在客户端计算机中,所以查看和修改 cookie 都是很方便的,这就是为什么常说 cookie 不能存放重要信息的原因。

每个 cookie 的格式都是这样的:<cookie名>=<值>;名称和值都必须是合法的标示符。

cookie 是存在有效期的。在默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。

alert(typeof document.cookie)结果是 string,曾经我以为是array,还闹过笑话...??br />

cookie 有域和路径这个概念。域就是domain的概念,因为浏览器是个注意安全的环境,所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念,一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问,而不能被其他目录下得网页访问(这句话有点绕,一会看个例子就好理解了)。

其实创建cookie的方式和定义变量的方式有些相似,都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ,而多个 cookie 可以存放在同一个cookie 文件中。

Cookie常见问题

cookie 存在两种类型:

你浏览的当前网站本身设置的cookie

来自在网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)
刚刚基础知识里面有说到 cookie 生命周期的问题,其实 cookie 大致可分为两种状态:

临时性质的cookie。当前使用的过程中网站会储存一些你的个人信息,当浏览器关闭后这些信息也会从计算机中删除
设置失效时间的cookie。就算浏览器关闭了,这些信息业依然会在计算机中。如 登录名称和密码,这样无须在每次到特定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年。

cookie 有两种清除方式:

通过浏览器工具清除 cookie (有第三方的工具,浏览器自身也有这种功能)
通过设置 cookie 的有效期来清除 cookie

注:删除 cookie 有时可能导致某些网页无法正常运行

浏览器可以通过设置来接受和拒绝访问 cookie。

出于功能和性能的原因考虑,建议尽量降低 cookie 的使用数量,并且要尽量使用小 cookie。

关于cookie编码的细节问题将会在cookie高级篇中单独介绍。

假如是本地磁盘中的页面,chrome的控制台是无法用JavaScript读写操作 cookie 的,解决办法...换一个浏览器^_^。

本章节分享几段关于javascript对于cookie的简单操作,比如对于cookie的写入和删除。

代码很简单,比较适合对于cookie基本操作还不太熟练的朋友参考。

一.写入cookie:

//两个参数,一个是cookie的名子,一个是值
function SetCookie(name,value){
 var Days = 30;//此 cookie 将被保存 30 天
 var exp = new Date();//new Date("December 31, 9998");
 exp.setTime(exp.getTime() + Days*24*60*60*1000);
 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

二.读取cookie:

//取cookies函数  
function getCookie(name){
 var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
 if (arr != null) return unescape(arr[2]); return null;
}

三.删除cookie:

//删除cookie
function delCookie(name){
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval = getCookie(name);
 if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
JS实现slide文字框缩放伸展效果代码
Nov 05 #Javascript
如何防止JavaScript自动插入分号
Nov 05 #Javascript
javascript常用函数(2)
Nov 05 #Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 #Javascript
javascript常用函数(1)
Nov 04 #Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 #Javascript
jQuery多条件筛选如何实现
Nov 04 #Javascript
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python中去空格函数的用法
2014/08/21 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
对Python3 序列解包详解
2019/02/16 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python函数基本使用原理详解
2020/03/19 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
文科教师毕业的自我评价
2014/01/16 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
婚礼秀策划方案
2014/05/19 职场文书
合作经营协议书范本
2014/09/16 职场文书
科学发展观标语
2014/10/08 职场文书
公司员工安全协议书
2014/11/21 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2016教师节感恩话语
2015/12/09 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书