Javascript操作cookie详细分析
Javascript操作cookie详细分析
Javaer们知道JavaEE中定义了一些接口用于操作cookie(
javax.servlet.http .Cookie)，但是对于前端的js，又是如何操作cookie的呢?资料参考：https://www.cnblogs.com/bellow/p/4962374.html
做了大量的简化、修改内容和文档格式调整
设置cookie
1. 设置内存cookie
内存cookie是保存在浏览器进程的内存中的，关闭浏览器后消失
不设置expires=即可，代码如下：
// 在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格，
// 名字很容易保证，但值有不确定性，必须用 escape 方法转义，同时它能解决乱码
document.cookie="str=" + escape("I love ajax");
一次设置多个cookie，用分号加空格（; ）隔开
(不建议使用，在有expires=的情况下失效)
document.cookie="userId=" + escape(828) + "; " + "userName=" + escape("hulk");
2. 设置磁盘cookie
磁盘cookie是保存在磁盘中的，关闭浏览器后还在
要设置磁盘cookie，加上expires=即可，代码如下：
// 语法格式：document.cookie="userId=828; expires=GMT_String";
// 其中GMT_String是以GMT格式表示的时间字符串，超过这个时间，cookie将消失，不可访问
// 获取当前时间
var date = new Date();
var expiresDays = 10;
//将date设置为10天以后的时间
date.setTime(date.getTime() + expiresDays*24*3600*1000);
document.cookie = "str=" + escape("I love ajax") + "; " + "expires=" + date.toGMTString();
3. 补充
- 有可能因为禁用cookie或者浏览器差异，或者浏览器不自持js在本地操作cookie导致实验失败
- 尽管document.cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值，例如
// 这时浏览器将维护两个cookie，分别是userId和userName // document.cookie 类似 document.addCookie() 的含义 document.cookie = "userId=" + escape(828); document.cookie = "userName=" + escape("hulk"); - 相同cookie名将覆盖前者的值
document.cookie = "userName=" + escape("hulk"); // 覆盖了前者的值 document.cookie = "userName=" + escape("stone"); - 最好是别用关键字
expires、path作为cookie的name，他们有特殊含义
读取cookie
使用document.cookie获取所有cookie值，结果是字串，通过字串截取获得相应的值
document.cookie = "userId=" + escape(9527);
document.cookie = "userName=" + escape("Stone Wang;王生");
var strCookie = document.cookie;
alert(strCookie); // 获取：userId=9527; userName=Stone%20Wang%3B%u941C%u5B2C%u6553
alert(unescape(strCookie));// 获取：userId=9527; userName=Stone Wang;王生
// 注：如果发生乱码是浏览器显示问题，因此代码未设置编码解码方式，正常情况不会发生
删除cookie
为了删除一个cookie，可以将其过期时间设定为一个过去的时间
<script language="JavaScript" type="text/javascript">
//获取当前时间
var date = new Date();
//将date设置为过去的时间
date.setTime(date.getTime() - 10000);
//将userId这个cookie删除
document.cookie="userId=828; expires=" + date.toGMTString();
</script>
指定可访问cookie的路径
1. 指定path
默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的
其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。
例如在www.xxx.com/html/x.html中所创建的cookie，
- 可以被相同目录
www.xxx.com/html/x.html或子目录www.xxx.com/html/sub/x.html所访问 - 但不能被父目录
www.xxx.com/x.html和其他目录www.xxx.com/html/other/x.html访问
为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下：
document.cookie="name=value; path=cookieDir";
其中cookieDir表示可访问cookie的目录。例如：
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如：
document.cookie="userId=320; path=/";
2. 指定domain
指定可访问cookie的主机名和路径类似，主机名是指同一个域下的不同主机，例如：
www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的
但可以通过domain参数来实现对其的控制，其语法格式为：
document.cookie="name=value; domain=cookieDomain";
以google为例，要实现跨主机访问，可以写为：
document.cookie="name=value;domain=.google.com";
这样，所有google.com下的主机都可以访问该cookie。
附
因原生js的API不方便，这里封装了常用的function
- 添加一个cookie
该函数接收3个参数：cookie名称，cookie值，以及在多少小时后过期。这里约定expiresHours为0时不设定过期时间，即当浏览器关闭时cookie自动消失
<script language="JavaScript" type="text/javascript">
function addCookie(name, value, expiresHours) {
var cookieString = name + "=" + escape(value);
//判断是否设置过期时间
if(expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours*3600*1000);
cookieString = cookieString + "; expires=" + date.toGMTString();
}
document.cookie = cookieString;
}
script>
- 获取指定名称的cookie值
该函数返回名称为name的cookie值，如果不存在则返回空
<script language="JavaScript" type="text/javascript">
function getCookie(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for(var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if(arr[0] == name) {
return arr[1];
}
}
return "";
}
script>
- 删除指定名称的cookie
该函数可以删除指定名称的cookie
<script language="JavaScript" type="text/javascript">
function deleteCookie(name) {
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=v; expires=" + date.toGMTString();
}
script>