超详细的Cookie增删改查

目录

• 1，什么是 Cookie？
  • 1.1，存储形式
  • 1.2，常用属性
  • 1.3，大小限制
• 2，增 or 改Cookie
• 3，查Cookie
• 4，删Cookie

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

---

公众号

往期文章

• 助你上手Vue3全家桶之Vue-Router4教程
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• 超详细！Vue-Router手把手教程
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 微信小程序实现搜索关键词高亮
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金