Cookie一般是用来在浏览器端存储用户的一些登录、浏览数据,方便缓存。要设置Cookie,可以有两种方法。
调用浏览器的CookiesAPI
为了使用浏览器的CookieAPI,我们首先要在manifest.json里设置Cookiepermission
,还要设置host-permission
确定能获取Cookie的网址。
接下来就是调用CookieAPI方法。
Cookie.set
使用set()
方法添加新的Cookie,返回的是一个Promise
对象。语法如下:
var setting = browser.cookies.set(
details // object
)
details
是一个对象,其中有可选的几个参数:
url
: 请求Cookie的urlname
: Cookie的名字value
: Cookie的值domin
: Cookie的作用域名path
: Cookie的路径secure
: Cookie是否安全(true/false)httpOnly
: Cookie是否只能在http上(true/false)expirationDate
: Cookie的截止时间,如果没有设置,则Cookie变为Session CookiestoreId
: 代表Cookie的存储ID
Cookie.get
使用get()
方法获取已有的Cookie,返回的是一个Promise
对象。语法如下:
var getting = browser.cookies.get(
details // object
)
details
可选的参数有:url
、name
、storeId
。
Cookie.getAll
使用getAll()
方法获取Cookie集合中所有匹配details的Cookie,返回的是一个Promise
对象。语法如下:
var getting = browser.cookies.getAll(
details // object
)
details
可选的参数有:url
、name
、domain
、path
、secure
、session
、storeId
。其中session
是bool值,代表是否要从cookies中过滤掉session cookie。
Cookie.remove
使用remove()
方法移除已有的Cookie,返回的是一个Promise
对象。语法如下:
var removing = browser.cookies.remove(
details // object
)
details
可选的参数有:url
、name
、storeId
。
Cookie.getAllCookieStores
使用getAllCookieStores()
方法获取所有的Cookie集合,返回的是一个Promise
对象。语法如下:
var gettingStores = browser.cookies.getAllCookieStores();
返回的Promise
对象中包含的数据是包括所有cookiestore对象的数组。举个例子:
function logStores(cookieStores) {
for(store of cookieStores) {
console.log(`Cookie store: ${store.id}\n Tab IDs: ${store.tabIds}`);
}
}
var getting = browser.cookies.getAllCookieStores();
getting.then(logStores);
Cookie.onChanged事件
当Cookie改变时,我们可以为它设置onChanged事件:
browser.cookies.onChanged.addListener(callback)
browser.cookies.onChanged.removeListener(listener)
browser.cookies.onChanged.hasListener(listener)
其中 addListener
接受一个callback,callback有一个参数changeInfo
,changeInfo
有三个属性:
- removed:bool值,代表cookie是否移除
- cookie:包含添加或移除信息的cookie对象
- cause:Cookie改变的原因
使用document.cookie
Cookie的结构很简单,就是键-值对,一般是以key-value;expiration_date;path;domain;
的顺序。
最简单的设置当前页面Cookie的方法就是直接给document.cookie
赋值,例如:document.cookie = "username=Simon, 12 Aug 2017 19:36:00 GMT; expires=Wed, 31 Oct 2017 11:00:00 GMT;";
,这样就设置了Cookie。但每次都这样设置很麻烦,我们可以用函数封装赋值方法。这里借鉴了网上的一些方法:
setCookie()
function setCookie(name, value, expires, path, domain) {
var cookie = name + "=" + encodeURIComponent(value) + ";";
if (expires) {
// If it's a date
if(expires instanceof Date) {
// If it isn't a valid date
if (isNaN(expires.getTime()))
expires = new Date();
} else {
expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);
}
cookie += "expires=" + expires.toGMTString() + ";";
}
if (path) {
cookie += "path=" + path + ";";
}
if (domain) {
cookie += "domain=" + domain + ";";
}
document.cookie = cookie;
}
这里的expires
可以是Date
对象,也可以是代表天数的数字。
要创建新的Cookie,可以这样:setCookie("website", "xmflyrk.com", new Date(new Date().getTime() + 10000));
或者 setCookie("author", "flyrk", 30);
getCookie()
function getCookie(name) {
var cok = document.cookie.split(';'),
length = cok.length;
for (var i = 0; i < length; i++) {
var pairs = cok[i].trim();
if (~pairs.indexOf(name)) {
return pairs.substring(pairs.indexOf(name) + name.length + 1);
}
}
return null;
}
调用getCookie()
的例子:
getCookie('author'); // "flyrk"
getCookie('Something'); // null
removeCookie()
function removeCookie(name, path, domin) {
if (getCookie(name)) {
setCookie(name, "", -1, path, domin);
}
}
删除某个Cookie我们就可以这样:
removeCookie("author");
console.log(getCookie("author")); //null
总结
有了这些API和自己封装的函数,我们就能对Cookie进行操作,方便地设置Cookie数据。
评论 (0)