localStorage、sessionStorage、cookie的区别以及如何使用

一、区别

1.localStorage

内存：5MB

生命周期：不手动去除，会一直存在

访问权限：受同源策略限制，不同页面或标签页间不能互相访问对方的数据

2.sessionStorage

内存：5MB

生命周期：页面重新加载或恢复时数据仍然存在，但在关闭浏览器或窗口后将被清除

访问权限：和localStorage相同

3.cookie

内存：4KB左右

生命周期：可以设置过期时间，如果不设置，默认关闭浏览器窗口或标签失效

访问权限：受同源策略限制，不同页面或标签页间不能互相访问对方的数据

二、使用

1.localStorage和sessionStorage

// 存储数据(属性名不能重复)
localStorage.setItem(key,value)
// 获取数据	
localStorage.getItem(key)	
// 删除单个数据
localStorage.removeItem(key)
// 清空数据	
localStorage.clear()		

这里可以把localStorage换为sessionStorage

2.cookie

这里直接封装了cookie的 存储、获取、修改、删除、清空 的函数。当然也可以选择使用关于cookie的库js-cookie或vue-cookie。

// 设置或修改cookie  name:键  value:值  days:过期时间
function setCookie(name, value = '', days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

// 获取指定cookie name:键
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 删除指定cookie name:键
function deleteCookie(name) {
    setCookie(name, "", -1);
}

// 清空cookie 
function clearCookies() {
    const cookies = document.cookie.split("; ");
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i];
        const name = cookie.split("=")[0];
        deleteCookie(name);
    }
}

以上便是本次的总结了，有问题的可以评论哦