一、区别
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);
}
}
以上便是本次的总结了,有问题的可以评论哦