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

理解不同之处

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 使用

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

token: localStorage.getItem("token") || "",
1
2
3
4

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

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

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);
}
1
2
3
4
5
6
7
8
9
10
11
12

• 使用

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

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

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

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

token

• 有的token在body，有的在headers