共计 3168 个字符，预计需要花费 8 分钟才能阅读完成。

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 的 url
• name: Cookie 的名字
• value: Cookie 的值
• domin: Cookie 的作用域名
• path: Cookie 的路径
• secure: Cookie 是否安全（true/false）
• httpOnly: Cookie 是否只能在 http 上（true/false）
• expirationDate: Cookie 的截止时间，如果没有设置，则 Cookie 变为 Session Cookie
• storeId: 代表 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 数据。

参考资料：
cookies
How to deal with cookie