h7ml
前端物语
前端物语
积微成著

JavaScript cookie

存储格式

1name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]，

键 = 值; 后续中括号的内容，都是可选项。

火狐支持缓存 cookie，谷歌只支持服务器缓存 cookie

  • [expires=date]：'expires=过期时间'
  • [path=path]：设置的 cookie 的路径
    • 如果不设置，默认是加载当前.html 文件的路径
    • 设置的 cookie 的路径，和加载当前文件的路径，必须一致，如果不一致，cookie 访问失败。
1'username=xxx;path=' + '/code14/cookie' // 可以访问当前与html同一路径
2'username=xxx;path=' + '/code14/cookie/111' // 设置其他路径后 不能访问
  • [domain=somewhere.com]：domain 限制访问域名
    • 如果不去设置，默认是加载当前 .html 文件的服务器域名 /ip
    • 如果加载当前文件域名和设置的域名不一致，设置 cookie 失败。不能设置
1document.cookie = 'username=xxx;domain=' + 'localhostxxx' // 设置失败
  • secure
    • 如果不设置，设置 cookie，可以通过 http/https 协议加载文件设置
    • 设置字段后，只能 https 协议加载 cookie.
1document.cookie = 'username=xxx;secure'

获取 cookie

1document.cookie

设置 cookie

1document.cookie = 'username=xxx'

转码储存

  • encodeURIComponent()：将中文编译成对应的字符
  • decodeURIComponent()：将对应的字符编译成中文
1document.cookie = `username=${encodeURIComponent('蜘蛛侠')}`

转码获取

1decodeURIComponent(document.cookie)

删除 cookie

1document.cookie = `username=;expires=${new Date(0)}`

setCookie 封装

1function setCookie(name, value, { expires, path, domain, secure }) {
2  let str = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
3  if (expires)
4    str += `;expires=${afterOfDate(expires)}`
5  if (path)
6    str += `;path=${path}`
7  if (domain)
8    str += `;domain=${domain}`
9  if (secure)
10    str += ';secure'
11  document.cookie = str
12}
13
14// 获取n天后的时间
15function afterOfDate(n) {
16  const date = new Date()
17  const day = date.getDate()
18  date.setDate(n + day)
19  return date
20}

getCookie 封装

1// n121=sa; 名字=name; 名字2=2name
2
3function getCookie(name){
4  var cookieStr = decodeURIComponent(document.cookie);
5  var strat = cookieStr.indexOf(" " + name + "=");
6  if(strat == "-1"){
7​    return null;
8  }else{
9​    var end = cookieStr.indexOf(";",strat);
10​    if(end == "-1"){
11​      end = cookieStr.length;
12​    }
13​    var str = cookieStr.substring(strat,end);
14​    return str.split("=")[1];
15  }
16}
17
18getCookie("名字2")

removeCookie 封装

1function removeCookie(name) {
2  document.cookie = `${encodeURIComponent(name)}=;expires=${new Date(0)}`
3}

cookie 封装

1/*
2  $cookie()
3  一个参数       获取
4  两个参数或以上    设置
5  两个参数，参数二 null 删除
6 */
7
8function $cookie(){
9  switch (arguments.length){
10​    case 1 :
11​      return getCookie(arguments[0]);
12​    case 2 :
13​      if(arguments[1] == null){
14​        removeCookie(arguments[0]);
15​      }else{
16​        setCookie(arguments[0],arguments[1],{});
17​      }
18​      break;
19​    default:
20​      setCookie(arguments[0],arguments[1],arguments[3]);
21​      break;
22  }
23}
24
25function setCookie(name,value,{expires,path,domain,secure}){
26  var str = encodeURIComponent(name) + "=" + encodeURIComponent(value);
27  if(expires) str += ";expires=" + afterOfDate(expires);
28  if(path) str += ";path=" + path;
29  if(domain) str += ";domain=" + domain;
30  if(secure) str += ";secure";
31  document.cookie = str;
32}
33
34function afterOfDate(n){
35  var date = new Date();
36  var day = date.getDate();
37  date.setDate(n + day);
38  return date;
39}
40function getCookie(name){
41  var cookieStr = decodeURIComponent(document.cookie);
42  var strat = cookieStr.indexOf(" " + name + "=");
43  if(strat == "-1"){
44​    return null;
45  }else{
46​    var end = cookieStr.indexOf(";",strat);
47​    if(end == "-1"){
48​      end = cookieStr.length;
49​    }
50​    var str = cookieStr.substring(strat,end);
51​    return str.split("=")[1];
52  }
53}
54function removeCookie(name){
55  document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
56}