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 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
js实现按座位号抽奖
Apr 05 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
vue绑定class的三种方法
Dec 24 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
php下获取客户端ip地址的函数
2010/03/15 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
Vue.js用法详解
2017/11/13 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
python实现简单socket通信的方法
2016/04/19 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
Python WSGI的深入理解
2018/08/01 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python 自动批量打开网页的示例
2019/02/21 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
过滤器的用法
2013/10/08 面试题
什么是方法的重载
2013/06/24 面试题
会计专业求职信
2014/08/10 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Pandas-DataFrame知识点汇总
2022/03/16 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏