【前端】cookie、localStorage和sessionStorage的封装

理解不同之处

特性	cookie	localStorage	sessionStorage
数据的声明周期	一般由服务器生成，可以设置失效时间，如果在浏览器生成，默认关闭浏览器之后失效	除非被清除否则永远保存	仅在当前会话有效，关闭页面或者浏览器后被清除
存放数据大小	4KB	一般5MB	一般5MB
与服务端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端中保存，不参与和服务器的通信	仅在客户端中保存，不参与和服务器的通信
用途	一般由服务器端生成，用于标识用户身份	用于浏览器端缓存数据	用于浏览器端缓存数据

localStorage

封装

• localStorage只能存储字符串类型。
• 这个封装是直接将一个【Object类型数据】转换成【String类型数据】进行存储。
• 所以如果只是一个token或者一个user值是不能通过JSON.stringify进行类型转换。

// localstorage中只能以字符串形式存储
// 在此直接过滤 成为db格式
const db = {
  // 以字符串存储在本地中
  save(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  // 以Object形式获取数据
  get(key, defaultValue = {}) {
    return JSON.parse(localStorage.getItem(key)) || defaultValue;
  },
  // 移除数据
  remove(key) {
    localStorage.removeItem(key);
  },
  // 清空本地存储
  clear() {
    localStorage.clear();
  },
};
// 导出db
export default db;

• 使用

permissions: db.get("permissions"),
roles: db.get("roles"),

token: localStorage.getItem("token") || "",

db.save("permissions", res.data.permissions); // Object值的存储使用db转换类型
db.save("roles", res.data.roles); // Object值的存储使用db转换类型

localStorage.setItem("token") // 字符串值的直接存储

sessionStorage

• 和localStorage基本相似

Cookie

封装

• Cookie只能存储字符串类型。
• 这里封装没有进行类型转换 可以参考localStorage的进行转换。

npm install js-cookie --save

import Cookies from "js-cookie";

export function getToken(key) {
  return Cookies.get(key);
}
//expires: 7 过期时间为7天
export function setToken(key,token) {
  return Cookies.set(key, token, { expires: 7 });
}
export function removeToken(key) {
  return Cookies.remove(key);
}

• 使用

import { setToken,getToken } from "@/utils/auth"

setToken('Token',res.headers.authorization) // 利用cookie存储token
// 因为这个封装没有进行类型转换 所以需要先将数据转换成字符串类型
var str = JSON.stringify(list); // 利用cookie存储用户信息 
setToken('userInfo',str)

config.headers.authorization = getToken("Token") // 获取token
let username = JSON.parse(getToken('userInfo')).username; // 获取用户信息中的用户名

JSON字符串和JSON对象之间的转换

• vue字符串与数组，json字符串与json对象之间的相互转换
• Json和其他数据类型的转换
• cookie中存、取json格式的数据

JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 json 对象

// 将数据解析为json模式
list =eval('('+ decoded.user+ ')');

// 将JSON数据转变成字符串
var str = JSON.stringify(list);

// 将字符串数据存储
Cookie.set("userInfo",str);

// 重新取出为JSON形式
let value = JSON.parse(Cookie.get('userInfo'));

// JSON模式就可以用value.某某数据中的值 取出其中的值
let username = value.username;
console.log(username)

token

• 有的token在body，有的在headers