Javascript操作cookie详细分析

迈不过友情╰ 2022-03-19 14:14 189阅读 0赞

# Javascript操作cookie详细分析 #

> Javaer们知道JavaEE中定义了一些接口用于操作cookie(`javax.servlet.http .Cookie`)，但是对于前端的js，又是如何操作cookie的呢?
> 
> 资料参考：[https://www.cnblogs.com/bellow/p/4962374.html][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，可以将其过期时间设定为一个过去的时间

### 指定可访问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目录下使用。