Javascript客户端存储-cookie

痛定思痛。 2022-11-11 13:07 157阅读 0赞

## 一、什么是cookie ##

Http cookie通常也叫做cookie，最初用于在客户端存储会话信息。这个规范要求服务器在响应http请求时通过发送`Set-Cookie`HTTP头部包含会话信息。HTTP响应会设置一个名为`name`，值为`value`的cookie。名和值在发送时都会经过URL编码。浏览器会存储这些会话信息，并在之后每个请求中都会通过HTTP头部cookie再将它们发回服务器。这些发送回服务器的额外信息可用于唯一标识发送请求的客户端。

### 1.1 cookie的限制 ###

cookie是与特定域绑定的。设置cookie后，它会与请求一起发送到创建它的域。这个限制能保证cookie中存储的信息只对被认可的接收者开放。cookie存储大小有限，通常遵循以下限制就不会在浏览器中遇到问题：

*  不超过300个cookie；
 *  每个cookie不超过4KB；
 *  每个域不超过20个cookie；
 *  每个域不超过80KB；
 *  每个域能设置的cookie总数也是有限的，不同浏览器有不同限制。如果cookie总数超过了单个域的上限，浏览器就会删除之前设置的cookie。IE和Opera会按照最近最少使用（LRU）原则删除之前的cookie。

### 1.2 cookie的构成 ###

cookie在浏览器中的参数有：  
（1）**名称**：唯一标识cookie的名称。cookie名必须经过URL编码；  
（2）**值**：存储在cookie里的字符串值。值必须经过URL编码；  
（3）**域**：cookie有效的域。发送到这个域的所有请求都会包含对应的cookie；  
（4）**路径**：请求URL中包含这个路径才会把cookie发送到服务器；  
（5）**过期时间**：表示何时删除cookie的时间戳，即什么时间之后就不会发送到服务器）。默认情况下，浏览器会话结束后会删除所有cookie。**把过期时间设置为过去的时间会立即删除cookie。**  
（6）**安全标志**：设置后，只在使用SSL安全连接的情况下才会把cookie发送到服务器。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]在上面Set-Cookie中，头部设置一个名为name的cookie，这个cookie在2007年1月22日7点10分24秒过期，对www.wrox.com及其他wrox.com的子域有效，设置了secure表示这个cookie只能在SSL连接上发送。  
注意，域、路径、过期时间和secure标志用于告诉浏览器什么情况下应该在请求中包含cookie，这些参数不会随着请求发送给服务器，实际发送的只有cookie的名/值对。

## 二、JS中的cookie ##

JS中的BOM提供了`document.cookie`属性处理cookie。它返回包含页面中所有有效cookie的字符串，以分号分隔，形式如下：  
`name1=value1;name2=value2;name3=value3`  
所有名和值都是URL编码的，因此必须使用decodeURIComponent() 解码。  
document.cookie设置cookie的格式如下，与Set-Cookie头部格式一样：  
`name=value; expires:expiration_time; path=domain_path; domain=domain_name; secure`  
在所有参数中，只有名和值是必须的。设置时最好使用`encodeURIComponent()`对名称和值进行编码：

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Mike");

CookieUtil对象可以辅助简化对cookie的读写和删除。

class CookieUtil { 
      // 获取给定名称的cookie值
      static get(name) {  
        let cookieName = `${ encodeURIComponent(name)}=`,
          cookieStart = document.cookie.indexOf(cookieName),
          cookieValue = null
    
        if (cookieStart > -1) { 
          let cookieEnd = document.cookie.indexOf(';', cookieStart)
          if (cookieEnd == -1) { 
            cookieEnd = document.cookie.length
          }
          cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length, cookieEnd))
        }
        return cookieValue
      }
      // 设置页面上的cookie
      static set(name, value, expires, path, domain, secure) { 
        let cookieText = `${ encodeURIComponent(name)}=${ encodeURIComponent(value)}}`
        if (expires instanceof Date) { 
          cookieText += `; expires=${ expires.toGMTString()}`
        }
        if (path) { 
          cookieText += `; path=${ path}`
        }
        if (domain) { 
          cookieText += `; domain=${ domain}`
        }
        if (secure) { 
          cookieText += `; secure`
        }
      }
      // 没有直接删除cookie，而是设置同名cookie
      static unset(name, path, domain, secure) { 
        CookieUtil.set(name, '', new Date(0), path, domain, secure)
      }
    }

使用CookieUtil

// 设置cookie
    CookieUtil.set('book', 'Javascript')
    // 读取cookie
    CookieUtil.get('book') // 'Javascript'
    // 删除cookie
    CookieUtil.unset('book')
    // 设置有路径，域，过期时间和安全
    CookieUtil.set('book', 'Javascript', '/books', 'www.wrox.com', new Date(), true)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]: /images/20221022/e7a822fea7cc402eb4bdb1d4a26be128.png