cookie
不是window下面的属性,它是document下面的属性,cookie有一套专门的取值与赋值方法,与localStorage,sessionStorage不同
特性
- cookie在document下面
- cookie可以设置一个时间自动去清除缓存,cookie如果不设置清除时间,则关闭浏览器自动清除。
- cookie它可以跨页面,但是不可以跨path路径(子路径可以取到父级路径的) ,前提是同域
赋值
- 新建一个文件夹,在文件夹下新建一个html页面
cookie3.html
和一个名为path2的文件夹 - 在path2文件夹下新建
cookie4.html
- 先看一下cookie:
-
赋值
// 普通赋值 document.cookie = 'userName=Aihh' // 带过期时间 10s后清除cookie var d = new Date(); d.setTime(Date.now() + 10*1000); document.cookie = 'userName=Aihh;Expires=' + d.toUTCString(); // 带访问路径 document.cookie="age=18;path=/path2";
注意:
- 设置过期时间使用的是0时区的时间,而我们北京时间是+8区的时间,所以这个时候要调用
toUTCString()
转换为标准时区的时间; -
path=/path2
设置只有在路径path2下面的网页才能访问(前提是同域),如果是path=/
则说明是根路径,任何同域页面都可以访问。
- 设置过期时间使用的是0时区的时间,而我们北京时间是+8区的时间,所以这个时候要调用
-
赋值后打开 Application 查看 cookie
- 普通赋值
- 带过期时间,设置10s后过期
-
带路径,设置只有在路径path2下面的网页才能访问(前提是同域)
- 这个时候发现在
cookie3.html
找不到这个cookie - 再打开path2下面的
cookie4.html
,就会看到这个cookie
- 这个时候发现在
封装
cookie 属性和值是用=
连接,属性之间用;
分隔,根据这个特点进行封装
var CookieHelper = {
addCookie: function (cookieName, cookieValue, exMinutes, cookiePath) {
// 第三/四个参数,按需传参
var str = cookieName + "=" + cookieValue;
if (arguments.length == 3) {
let d = new Date();
d.setTime(Date.now() + exMinutes*60*1000); // 过期单位这里设置为分钟
str += ";Expires=" + d.toUTCString();
}
if (arguments.length == 4) {
str += ";path=" + cookiePath;
}
document.cookie = str;
},
getCookie: function (cookieName) {
var cookieArr = document.cookie.split(";");
for (let i in cookieArr) {
var arr = cookieArr[i].split("=");
if (arr[0].trim() == cookieName) {
return arr[1];
}
}
},
removeCookie: function (cookieName) {
document.cookie = cookieName + "= ;Expires=" + (new Date()).toUTCString();
}
}
与 localStorage,sessionStorage 的区别
- localStorage,sessionStorage在window下面, cookie在document下面
- localStorage要手动清除,sessionStorage关闭浏览器自动清除,而cookie可以设置一个时间自动去清除,cookie如果不设置清除时间,则关闭浏览器自动清除。
- localStorage可以跨同域页面,sessionStorage只能跨父子页面(通过
open()
打开的页面),cookie它可以跨页面,但是不可以跨path路径(子路径可以取到父级路径的) 。他们都不能跨域
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。