前端本地存储 - 个人笔记

• localStorage
• sessionStorage 的个人区别
• cookie

名称	存储大小	特点	适合的应用场景
localStorage	5Mb	1、长期存储到浏览器中 2、不参与服务端的通信	应用缓存 登录信息 同一个浏览器不同网页的通信
sessionStorage	5Mb	1、存在目标网页的显示的时间段中（网页刷新/关闭，存储内容被清空） 2、不参与服务端的通信
cookie	4kb	1、普通浏览器存储50条cookie 2、cookie参与服务端的通信 3、如果cookie过多，影响性能

cookieStore
只在https协议下能访问到，http协议访问时undefined

async function CookieEvent() {
    const hasCookie = await window.cookieStore.get({ name: 'Admin-Token' });
    if (!hasCookie || !hasCookie.value) {
        vm.$message.error('您的登录信息已经失效');
        router.replace({ path: '/login' });
    }
}
// 监听cookie的变化，跳转到登录页
function initListenCookie() {
    if (window.cookieStore) {
        window.cookieStore.addEventListener('change', CookieEvent);
    }
}
window.cookieStore.removeEventListener('change', CookieEvent, false);

轮询方式

let timer = null;
/**
 * 返回后台是否开启登录的状态
 * @returns boolean
 */
async function CookieEvent() {
    const cookieData = vm.$cookie.get('Admin-Token');
    if (!cookieData && (router.currentRoute.name !== 'Login')) {
        vm.$message.error('您的登录信息已经失效');
        router.replace({ path: '/login' });
    }
    clearTimeout(timer);
    timer = null;
    timer = setTimeout(CookieEvent, 2500);
}
// 监听cookie的变化，跳转到登录页
function initListenCookie() {
    timer = setTimeout(CookieEvent, 2500);
}