COOKIE(储存在用户本地终端上的数据)

1.cook的特点

1. 存储大小有限制，一般是 4 KB 左右
2. 数量有限制，一般是 50 条左右
3. 有时效性，也就是有过期时间，一般是 **会话级别**（也就是浏览器关闭就过期了）
4. 有域名限制，也就是说谁设置的谁才能读取

cookie 是一个以字符串的形式存储数据的位置
每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
也就是说，cookie 是不需要我们手动设置，就会自动在 客户端 和 服务端之间游走的数据
我们只是需要设置一下 cookie 的内容就可以
cookie是以域名为分类的，一个域名下存储多条cookie

2.使用方式

 读取 cookie 的内容使用 `document.cookie`

  ```javascript
  const cookie = document.cookie
  console.log(cookie) // 就能得到当前 cookie 的值
  ```

- 设置 cookie 的内容使用 `document.cookie`

  ```javascript
  // 设置一个时效性为会话级别的 cookie
  document.cookie = 'a=100'
 
  // 设置一个有过期时间的 cookie
  document.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'
  // 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期，过期后会自动消失
  ```

- 删除 cookie 的内容使用 `document.cookie`

  ```javascript
  // 因为 cookie 不能直接删除
  // 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前
  // 那么浏览器就会自动删除 cookie
  document.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'

3.COOKIE 操作封装

- 因为 js 中没有专门操作 COOKIE 增删改查的方法
- 所以需要我们自己封装一个方法

 

1.设置 cookie

```javascript
/**
 * setCookie 用于设置 cookie
 * @param {STRING} key  要设置的 cookie 名称
 * @param {STRING} value  要设置的 cookie 内容
 * @param {NUMBER} expires  过期时间
 */
function setCookie (key, value, expires) {
  const time = new Date()
  time.setTime(time.getTime() - 1000 * 60 * 60 * 24 * 8 + expires) // 用于设置过期时间

  document.cookie = `${key}=${value};expires=${time};`
}
```

 

2.读取 cookie

```javascript
/**
 * getCookie 获取 cookie 中的某一个属性
 * @param {STRING} key 你要查询的 cookie 属性
 * @return {STRING} 你要查询的那个 cookie 属性的值
 */
function getCookie(key) {
  const cookieArr = document.cookie.split(';')

  let value = ''

  cookieArr.forEach(item => {
    if (item.split('=')[0] === key) {
      value = item.split('=')[1]
    }
  })

  return value
}
```

 

3.删除 cookie

```javascript
/**
 * delCookie 删除 cookie 中的某一个属性
 * @param {STRING} name 你要删除的某一个 cookie 属性的名称
 */
function delCookie(name) {
  setCookie(name, 1, -1)
}

4.storage：缓存

   localStorage 最大一般可以储存  5m,除非手动清除，否则永远不会过期，不需要服务器环境（真的存储在本地）
永久缓存
localStorage
    localStorage.setItem("key",v);
    localStorage.getItem("key");
    localStorage.removeItem("key")
    localStorage.clear();
会话 缓存
sessionStorage  (有效期是关闭浏览器之前)
    sessionStorage.setItem("key",v);
    sessionStorage.getItem("key");
    sessionStorage.removeItem("key")
    sessionStorage.clear();