欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

深入理解Cookie

程序员文章站 2024-03-20 18:15:58
...

一、什么是Cookie?

Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制。从实现上说,Cookie是存储在客户端上的一小段数据,浏览器(即客户端)通过HTTP协议和服务器端进行Cookie交互。

Cookie的处理分为以下几步:

  • 服务器向客户端发送cookie
  • 浏览器将cookie保存
  • 之后每次请求浏览器都会携带cookie发送给服务器

使用场景:保存用户登录状态;跟踪用户行为;记录购物车信息等等 

二、在vue项目中使用Cookie

1. 安装js-cookie      

# npm install js-cookie --save

或者

# yarn add js-cookie

2. 封装函数

import Cookies from "js-cookie";

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey);
}

export function setToken(TokenKey, token) {
  return Cookies.set(TokenKey, token);
}

export function removeToken(TokenKey) {
  return Cookies.remove(TokenKey);
}

3. 使用封装好的方法设置和更改token。

三、Cookie的性能影响

创建cookie之后,观察每一次请求的request-header变化:

深入理解Cookie

深入理解Cookie

深入理解Cookie可以看出浏览器每一次发送请求都会携带cookie数据,这会带来额外的性能开销(尤其是在移动环境下) 。因为一旦设置的cookie过多,会导致报头较大,而大多数的cookie并不需要每次都会用上,会造成带宽的部分浪费。

目前,新的浏览器API已经允许开发者直接将数据存储到本地,如使用 Web storage API (本地存储和会话存储)或 IndexedDB 。因此,为防止额外的性能开销,可采用WebStorage的存储方式取代Cookie的使用。