超详细的Cookie增删改查

1，什么是 Cookie？
2，增 or 改Cookie
3，查Cookie
4，删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	占用字节大小	无需设置

Cookie描述

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()，有惊喜哦

公众号

往期文章

个人主页

posted @ 2022-02-21 11:27 鹏多多阅读(295) 评论(0) 编辑收藏举报

刷新页面返回顶部

鹏多多