cookie、sessionStorage，localStorage的区别及使用方法

首先，HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage

• localStorage的生命周期是永久的，所以除非主动清除localStorage信息，否则这些信息将永远存在。

• localStorage存放数据大小一般为5MB,且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

使用方法：

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
localStorage.setItem('user', '张三');
 
// 2、从本地存储获取数据
localStorage.getItem('user');
 
// 3、从本地存储删除某个已保存的数据
localStorage.removeItem('user');
 
// 4、清除所有保存的数据
localStorage.clear();

sessionStorage

• sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效。

• sessionStorage存放数据大小一般为5MB,且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

使用方法：

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
sessionStorage.setItem('userName', '李四');
 
// 2、从本地存储获取数据
sessionStorage.getItem('userName');
 
// 3、从本地存储删除某个已保存的数据
sessionStorage.removeItem('userName');
 
// 4、清除所有保存的数据
sessionStorage.clear();

存储复杂数据类型

存储简单数据类型直接使用上述方法即可，下面介绍一下如何存储复杂数据类型（如：对象，数组），复杂数据类型不可直接使用上述方法，使用之后如下图：

因此，在存储前需要转换数据格式，相应的取出后也要转换格式

• 存储数据前：利用JSON.stringify将对象转换成字符串；

• 获取数据后：利用JSON.parse将字符串转换成对象。

cookie

介绍：cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。总结后，cookie是服务器端发给客户端的文本文件；目的是用于辨别用户身份。

• cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效。

• cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息。

• cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

• cookie操作起来较为繁琐，并且部分数据不可以读取操作。

使用方法：

//  src/utlis/auh.js 
import Cookies from 'js-cookie'
// 设置一个 token 的键
const TokenKey = 'testToken'


// 获取 token
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)
}

先对其进行封装，在使用的文件里引用即可：

import { getToken, setToken,removeToken } from ‘@/utlis/auth.js’