前端存储方式及区别

一、Cookies方式

1. 会自动为每个请求携带所有的cookies数据，比较方便。但也是缺点，浪费流量
2. 容量只有4k
3. 浏览器API比较原始，需要自行封装操作

// 1. 安装js-cookie库
// 2. 封装js文件 用于操作cookie

import Cookies from 'js-cookie'

const TokenKey = 'vue_admin_token'
// 获取cookie
export function getToken() {
  return Cookies.get(TokenKey)
}
// 存储token
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
// 删除token
export function removeToken() {
  return Cookies.remove(TokenKey)
}

二、localStorage方式

1. 兼容IE8，操作方便
2. 永久存储，除非手动删除
3. 容量为5M

 // 存储简单数据
  存储数据：localStorage.setItem(key,value) 
  读取数据：localStorage.getItem(key)
  删除数据：localStorage.removeItem(key)
 // 存储复杂数据
  存储：把复杂数据类型转换成JSON字符串：JSON.stringify(复杂数据类型)
  获取：把JSON字符串转换回复杂数据类型：JSON.parse(JSON字符串)

  localStorage.setItem("searchHistory", JSON.stringify(newArr))
  let searchHistory = JSON.parse(localStorage.getItem("searchHistory"))
 
 如果想要删除localStorage中的所有数据 可以使用
 localStorage.clear()

三、sessionStorage方式

1. 功能基本与localStorage相似，但当前页面关闭后数据即被自动清理
2. 与Cookies、localStorage不同点是 不能在所有同源窗口间共享，属于会话级别的存储

四、IndexedDB——>浏览器数据库

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。

1. 是一种NoSQL数据库，用键值对进行存储，可进行快速读取操作
2. 适合复杂Web存储场景，用js操作方便(前端存储大量数据)
3. 存储空间大，大于等于250MB

// 具体代码实现
// https://developer.aliyun.com/article/974425#slide-0

the end …