每天一个前端小知识

1.cookie，sessionStorage，localStorage 区别？

服务器可以设置禁止JS访问cookie：HttpOnly

export const getCookie = () => {
  let cookies = document.cookie.split(';').map(cookie => cookie.split('='))
  let cookie = {}
  for (let i = 0; i < cookies.length; i++) {
    let name = cookies[i][0]
    let value = cookies[i][1]
    // 解码
    cookie[name] = decodeURIComponent(value)
  }
}
export const setCookie = (key, value, time = 2 * 24 * 60 * 60) => {
  // 编码
  const newValue = encodeURIComponent(value)
  // max-age设置cookie有效期
  document.cookie = `${key}=${newValue}; max-age=${time}`
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

window.localStorage和window.sessionStorage是浏览器自带的，调用时无需带上window
项目中可以自己封装 storage，也可以使用封装好的 good-storage
localStorage是同步的，会影响浏览器渲染进度

// 自己封装的storage
const commonKey = 'current_project_name'

export const local = {
  // 根据键名获取
  get: key => {
    return JSON.parse(localStorage.getItem(`${commonKey}_${key}`))
  },
  // 根据键名设置
  set: (key, data) => {
    return localStorage.setItem(`${commonKey}_${key}`, JSON.stringify(data))
  },
  // 根据键名移除
  remove: key => {
    return localStorage.removeItem(`${commonKey}_${key}`)
  },
  // 清空存储中的所有数据
  clear: () => {
    return localStorage.clear()
  }
}

export const session = {
  get: key => {
    return JSON.parse(sessionStorage.getItem(`${commonKey}_${key}`))
  },
  set: (key, data) => {
    return sessionStorage.setItem(`${commonKey}_${key}`, JSON.stringify(data))
  },
  remove: key => {
    return sessionStorage.removeItem(`${commonKey}_${key}`)
  },
  clear: () => {
    return sessionStorage.clear()
  }
}
// 使用
import { local, session } from '@/utils/storage'
local.set('token', token)
local.get('token')
local.remove('token')
local.clear()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

2.cookie、session、token的区别？

首先聊一下Http无状态是怎么回事
你这次访问了服务器，关闭网页，再次访问服务器，服务器是没有意识到又是你来访问。但不知道是谁访问的，怎么记住登录状态呢？
核心手段是使用存储技术。

1.数据库存储用户名密码
2.浏览器记住用户名密码，浏览器实现每次HTTP请求都自动带数据给服务器：技术cookie、session、token

Cookie：作为一个数据载体

浏览器发送HTTP请求，服务器进行Cookie设置（Set-Cookie：包含key-value）并发送给浏览器，浏览器将Cookie保存起来，并在接下来的每一个HTTP请求都自动加上这个Cookie

每个网站的Cookie信息是可以在应用中查看到的，此时直接将用户名密码放在Cookie里面是很不安全的

Session（会话）：生于服务器，保存于服务器，由服务器主导

浏览器访问服务器就是他们进行会话的开始，不同的网站对每个用户的会话都会设定时间以及唯一ID（Session ID）

把SessionID放入Cookie中送到客户端，根据Cookie的特性，让Cookie跟随HTTP的每个请求发送，由于SessionID是一段随机生成的无序的唯一值，一定程度上解决了单Cookie不安全的问题

Token（JWT令牌）：生于服务器，保存于浏览器，由客户端主导

持有Token就可以允许访问服务器
header.payload.signature（header是生成签名的算法，payload是一些特定的数据，比如有效期，将header和payload的内容进行base64编码，编码后的信息通过算法运算得到签名信息signature），只有header和payload有一个改变，整体就会变化