1，什么是 Cookie？

Cookie是一些数据, 存储于你电脑上的文本文件中。

当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决如何记录客户端的用户信息。当用户访问web页面时，他的名字可以记录在Cookie中。在该用户下一次访问该页面时，可以在Cookie中读取该用户的访问记录。

当浏览器从服务器上请求web页面时，属于该页面的Cookie会被添加到该请求中。服务端可以通过这种方式来获取用户的信息。

1.1，存储形式

Cookie以键值对形式存储，如下所示：

userName=pony

1.2，常用属性

属性	用处	默认值
Name	键	无
Value	值	无
Domain	允许访问的域	当前域
Path	允许访问的路径	当前路径
Expires / Max-Age	过期时间	关闭页面即清除(Session)
Size	占用字节大小	无需设置

1.3，大小限制

浏览器	大小 (KB)	每个域存储个数限制
Firefox	4	无
Safari	4	无
Opera	4	30
IE	4	50
Edge	4	50
Chrome	4	50

2，增 or 改Cookie

/**

 * 设置cookie

 * @param {String} key 键

 * @param {String} value 值

 * @param {String} expires 过期时间(yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss 或 时间戳) => default：页面关闭即过期(Session)

 * @param {String} domain 域 => default：当前域

 * @param {String} path 路径 => default：/

*/

function setCookie(key, value, expires = '', domain = window.location.hostname, path = '/') {

  const time = expires ? new Date(expires) : expires

  console.log(time)

  const cookie = `${key}=${value}; expires=${time}; domain=${domain}; path=${path}`

  document.cookie = cookie

}

调用例子：

setCookie('user', '我是你爸爸', '2022-02-20 16:29:00').

// 或者

setCookie('user', '我是你爸爸', '2022-02-20')

// 或者

const timestamp = new Date('2022-10-01').getTime()

setCookie('user', '我是你爸爸', timestamp)

3，查Cookie

/**

 * 获取所有cookie的key

 * @return {Array<string>} Cookie键组成的数组

*/

function getAllCookieKey() {

  const Cookie = document.cookie

  const cookieList = Cookie.split('; ')

  return cookieKeyList = cookieList.map(item => {

    return item.split('=')[0]

  })

}

/**

 * 根据cookie的key获取对应的值

 * @param {String} key 键

 * @return {String} value 值

*/

function cookieKeyGetValue(key) {

  const Cookie = document.cookie

  const cookieList = Cookie.split('; ')

  const cookieKeyList = cookieList.map(item => {

    return item.split('=')[0]

  })

  const index = cookieKeyList.indexOf(key)

  return cookieList[index].split('=')[1]

}

4，删Cookie

/**

 * 根据key清除cookie

 * @param {String} key 键

 * @param {String} domain 域 => default：当前域

 * @param {String} path 路径 => default：/

*/

function clearCookie(key, domain = window.location.hostname, path = '/') {

  const Time = new Date()

  Time.setTime(Time.getTime() + -1 * 24 * 60 * 60 * 1000)

  const expires = `expires=${Time.toUTCString()}`

  document.cookie = `${key}=; ${expires}; path=${path}; domain=${domain}`

}

// 清除所有cookie

function clearAllCookie() {

  const cookieKeyList = getAllCookieKey()

  for (let key of cookieKeyList) {

    clearCookie(key)

  }

}

如果看了觉得有帮助的，我是@鹏多多，欢迎点赞关注评论；END

PS：在本页按F12，在console中输入document.querySelectorAll('.diggit')[0].click()，有惊喜哦

公众号

往期文章

个人主页

巴特西

超详细的Cookie增删改查