js之cookie操作

Mark   in HangZhou

导语：今天，说一下这个cookie的属性和用法，包括设置cookie,获取cookie,删除cookie。cookie是Document对象的一个属性，可以使js方便的把 一些数据放在在本地进行存取操作。cookie还用于客户端脚本化，是http协议的一个标准扩展。

# cookie的概念

cookie是Web游览器存储的少量命名数据，它作用于某个特定的网页或者网站。它可以在客户端和服务器之间的传递数据，位于服务器端的脚本可以读取到客户端的cookie。

常用的使用场景有以下几个：

  • 用户登录，服务器记录下用户的登录信息，以便验证下次是否重新登录；

  • 电商网站的购物车，记录下用户的购物车购买东西喜好，以便下次推广相关的产品；

  • 网络广告主和网络广告服务商的广告推广，对于不同网站进行用户广告的推送。

温馨提示：由于cookie是http协议的标准扩展，所以要在http协议下的网站和页面才可以使用cookie。不要使用在游览器中打开（类似于：

file:///D:/test.html），建议开启http服务（http://localhost:2009/test.html）。

检测是否支持

由于用户登录或者购物车需要记录cookie的有关信息，所以首先要检测用户的游览器是否开启了cookie，没有开启要提示用户开启cookie后在操作。

下面是检测游览器的cookie是否开启的方法：

<p id="cookieTips"></p>
1
//isOpenCookie这个方法需要传一个id用来给用户显示提示语。
function isOpenCookie(id) {  
  var cookieTips = document.getElementById(id);
  var result = window.navigator.cookieEnabled;
  if (result) {
    cookieTips.style.color = '#269d26';
    cookieTips.style.fontSize = '18px';
    cookieTips.innerHTML = '您的cookie已激活!';
  } else {
    cookieTips.style.color = '#f00';
    cookieTips.style.fontSize = '18px';
    cookieTips.innerHTML = '您的cookie未激活，可能不能享受好的服务!';
  }
  return result;
}
console.log(isOpenCookie('cookieTips')); // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# cookie的属性

cookie的属性有名字和值，最大期限，当前可以访问cookie信息的文件路径，可以访问cookie的网站域名，还有安全性属性，下面一一介绍。

  • 名字和值

这个就是name和value属性了，name是你要存的数据的名字，value是你要存的名字对应的值。

由于这个值是明文可见的，非常的不安全，所以你要进行编码和解码操作，可以使用以下两种方法：

早期的方法：escape()编码，unescape()解码；（已废弃，但可以用）

新的方法：encodeURIComponent()编码，decodeURIComponent()解码。

方法： document.cookie = "<名字>=<值>"。

例如：document.cookie = "title=" + encodeURIComponent('世界那么大')。

  • 最大期限

最大期限之前是expires属性（已废弃）；现在是max-age来表示，它接收秒作为单位。

方法： document.cookie = "max-age=<数字>"。

例如：document.cookie = "title=" + encodeURIComponent('你好啊') + ";max-age=" + 606024*7;。

  • path

path就是当前文件所在的目录，在这个目录下的所以网页都可以共享这个cookie信息，但是不在这个路径下的网页就享受不到这个cookie信息了。

比如说：test.html在server这个目录下，test.html的网页设置了cookie，那么这个server下面的其他网页也可以共享这一个cookie信息；但是不在server这个目录下的网页就享受不到这个cookie信息了。

可以通过设置这个属性来告诉游览器哪些目录下的网页可以获取cookie信息。

方法： document.cookie = "path='<文件路径名字>'"。

例如：document.cookie = "title=" + encodeURIComponent('你好啊') + ";max-age=" + 60*60*24*7 + ';path=' + '/';。

  • domain

domain就是当前html文件所在的这个网站（不包括二级域名），在这个网站下的所以网页都可以共享这个cookie信息，但是不在这个网站下的网页就享受不到这个cookie信息了。

比如说：test.html在http://www.examle.com这个目录下，test.html的网页设置了cookie，那么这个http://www.examle.com网站下面的其他网页也可以共享这一个cookie信息；但是不在http://www.examle.com这个网站下的网站（比如：http://blog.examle.com）网页就享受不到这个cookie信息了。

可以通过设置这个属性来告诉游览器哪些网站可以获取cookie信息。

方法： document.cookie = "domain='<网站域名>'"。

例如：document.cookie = "title=" + encodeURIComponent('你好啊') + ";max-age=" + 60*60*24*7 + ';domain=' + '127.0.0.1';

那么其他的比如说localhost下面的网页无法获取cookie信息。

  • secure

这个属性是一个布尔值，如果添加到一条cookie记录中，那么这个cookie只能在带有https安全协议或者其他安全协议的网站下面进行存取。

例如: document.cookie = "title=" + encodeURIComponent('你好啊') + ";max-age=" + 60*60*24*7 + ';secure';

# cookie的方法

# 设置cookie

可以通过封装一个方法来方便的设置cookie，下面是我封装的一个设置cookie的方法，里面要传五个参数，分别对于五个属性。

原理就是对传入的参数进行类型检测，然后遍历对象的属性和值进行存储。

function setCookie(name,value,maxAge,path,domain,secure) {
  //检测flag
  var cookieinfo = {
    name: name,
    value: value,
    maxAge: maxAge,
    path: path,
    domain: domain,
    secure: secure
  };
  var res = '';

  //验证值
  for(key in cookieinfo) {
    var val = cookieinfo[key];
    if (key == 'path') {
      if (!val) {
        continue;
      }else if (typeof val != 'string') {
        throw new Error('Error: path must be an string!');
      }
    }else if (key == 'domain') {
      if (!val) {
        continue;
      }else if (typeof val != 'string') {
        throw new Error('Error: domain must be an string!');
      }
    }else if (key == 'secure') {
      if (!val) {
        continue;
      }else if (typeof val != 'boolean') {
        throw new Error('Error: secure must be an boolean!');
      }
    }else if (val == '' || val == undefined || val == null) {
      throw new Error('Error:' + key + ' not a null value!');
    }
  }

  //赋值
  for (var key in cookieinfo) {
    var val = cookieinfo[key];
    if (val == undefined) {
      continue;
    }
    if (key == 'value') {
      continue;
    }
    if (key == 'name') {
      res += cookieinfo['name'] + '=' + encodeURIComponent(cookieinfo['value']) + ';';
    }else if (key == 'maxAge') {
      res += 'max-age' + '=' + cookieinfo['maxAge'] + ';';
    } else if (key == 'secure' && cookieinfo['secure'] === true) {
      res += 'secure;';
    } else {
      res += key + '=' + val + ';';
    }
  }

  if (res) {
    document.cookie = res;
  }
}
//例如：
setCookie('title',document.title,60*60*24*7,'/','127.0.0.1',secure);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# 读取cookie

可以通过封装一个方法来方便的读取cookie，下面是我封装的一个读取cookie的方法，里面要传两个参数，第一个是布尔值，true表示获取全部cookie,false表示不用；第二个参数是你要获取的cookie名字。

原理就是对cookie进行分解，然后再进行对比，返回相应的值。

function getCookie(isAll,name) {
  var tisAll = isAll;
  var tname = name;

  if (typeof tisAll != 'boolean') {
    throw new Error('Error: tisAll not an boolean!');
  }
  if (!tisAll) {
    if (tname == 'undefined'  || tname == null ||
      tname == '' ||  typeof tname == 'object' ||
      typeof tname == 'function') {
      throw new Error('Error: name not an object or function or undefined!');
    }
  }
  
  var cookie = document.cookie;
  var cookies = cookie.split(';');
  var value = '';
  var allObj = {};
  for(var i=0;i<cookies.length;i++) {
    var vals = cookies[i].split('=');
    var allKey = vals[0].trim();
    var allVal = decodeURIComponent(vals[1]);
    if (allKey == '' && allVal == '') {
      continue;
    } else {
      if (tisAll) {
        allObj[allKey] = allVal;
      } else {
        if (tname == allKey) {
          value = allVal;
        }
      }
    }  
  }
  
  if (!tisAll && value == '') {
    throw new Error('Error:' + tname +  ' not found!');
  }

  if (tisAll) {
    for (var key in allObj) {
      if (key == '' && allObj[key] == 'undefined') {
        throw new Error('Error: all cookie not found!');
      }
    }
  }

  var res = tisAll ? allObj : value;
  
  return res;
}
//例如：上面的cookie值
console.log(getCookie(false,'title')); // 你好啊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# 删除cookie

可以通过封装一个方法来方便的删除cookie，下面是我封装的一个删除cookie的方法，里面要传一个参数，参数是你要删除的cookie名字。

原理：只要设置这个cookie的期限为0，就可以删除这个cookie了。

function removeCookie(name) {
  if (name == '' || name == undefined || name == null) {
    throw new Error('Error: name not an null!');
  }
  var cookie = document.cookie;
  var cookies = cookie.split(';');
  var res;
  for(var i=0;i<cookies.length;i++) {
    var vals = cookies[i].split('=');
    var allKey = vals[0].trim();
    if (name == allKey) {
      res = true;
    }
  }
  if (!res) {
    throw new Error('Error:' + name +' not found!');
  }
  
  document.cookie = name + '=' + '' + ';max-age=0';
}
//例如：删除上面的title
removeCookie('title');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 写在最后

有关cookie的知识点就讲这么多，老铁，赶快用起来吧！

版权声明：博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：js之cookie操作

如需转载，请注明《js之cookie操作》转自，原作者Mark

分享至：

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧
cookie的概念
cookie的属性
cookie的方法
设置cookie
读取cookie
删除cookie
写在最后
  • Copyright © 2017-2024 MarkGuan