理解不同之处
特性 | 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对象之间的转换
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