JavaScript实现Cookie的写入、读取与删除操作详解

JavaScript Cookie基础概念

在深入具体代码实现之前，有必要先梳理Cookie的基础知识。

首先需要明确Cookie的定义。

Cookie是存储于访问者计算机中的变量数据。每当同一台计算机通过浏览器请求某个页面时，该Cookie便会随请求发送。利用JavaScript，开发者可以创建并获取这些Cookie的值。

Cookie本质上是访问过的网站在客户端创建的文件，用于存储浏览信息，例如用户的个人资料信息。

从JavaScript的视角来看，Cookie即为一组字符串信息。这些数据存储在客户端计算机中，旨在实现客户端与服务器之间的信息传递。

在JavaScript中，可以通过document.cookie属性来读取或设置这些Cookie信息。由于Cookie常用于客户端与服务端通信，除了JavaScript，服务端语言（如PHP）同样可以存取Cookie。

接下来介绍Cookie的基础知识要点。

Cookie存在大小限制，每个Cookie存储的数据量不得超过4kb。如果Cookie字符串长度超过4kb，该属性将返回空字符串。

由于Cookie最终以文件形式存储在客户端计算机中，查看和修改Cookie相对便捷。这也正是业界普遍认为Cookie不适合存储重要敏感信息的原因。

每个Cookie的格式遵循：<cookie名>=<值>；其中名称和值必须是合法的标识符。

Cookie具有有效期概念。默认情况下，Cookie的生命周期在浏览器关闭时结束。若希望Cookie在浏览器关闭后依然有效，必须为其设置有效期，即Cookie的失效日期。

执行alert(typeof document.cookie)的结果为string，这表明Cookie在JS中是字符串类型，而非数组，此前曾有人误以为是array。

Cookie涉及域（domain）和路径（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的使用数量，并尽量使用小型Cookie。

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

如果是本地磁盘中的页面，Chrome控制台的JavaScript无法读写操作Cookie，解决办法是更换浏览器。

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();
}