js缓存cookie、localStorage、sessionStorage
cookie、localStorage、sessionStorage的区别cookie:设置cookie后,cookie每次请求都会在头上带上cookie信息。cookie在设置的时候如果不设置过期时间,就表示是个会话cookie,以前我以为关闭浏览器会话cookie就消失了,然而在多数情况下windows系统或者安卓系统确实是这样的。但是在macOS系统或者ios系统中,关闭浏览器并不会清除掉会话cookie,结束浏览器进程才行。localStorage:localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。满了的情况下仍继续存储并不会覆盖其他的值,而是直接报错(QuotaExceededError),并且当前存储的值也会被清空。浏览器支持每个域名下存储5M数据。sessionStorage:sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。假设你在A页面存储了sessionStorage,新开选项卡将A页面的链接粘贴进去打开页面,sessionStorage也是不存在的。所以sessionStorage存在的条件是页面间的跳转,A页面存储了sessionStorage,他要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问sessionStorage。cookie的使用
localStorage的使用
/*设置cookie*/
function setCookie(name, value, iDay)
{
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
};
/*使用方法:setCookie('user', 'simon', 11);*/
/*获取cookie*/
function getCookie(name){
var arr=document.cookie.split('; ');//多个cookie值是以; 分隔的,用split把cookie分割开并赋值给数组
for(var i=0;i<arr.length;i++){//历遍数组
var ars=arr[i].split('=');//原来割好的数组是:user=simon,再用split('=')分割成:user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon
if(ars[0]==name){//如果数组的属性名等于传进来的name
return ars[1];//就返回属性名对应的值
}
}
return ''; //没找到就返回空
}
/*使用方法:getCookie('user')*/
/*删除cookie*/
function removeCookie(name){
setCookie(name, 1, -1); //-1就是告诉系统已经过期,系统就会立刻去删除cookie
};
/*使用方法:removeCookie('user')*/
1.正数:将Cookie写入浏览器所在电脑的硬盘,持久化存储,到时间自动删除。
2.负数:默认值,Cookie在当前浏览器内存中,当浏览器关闭,则Cookie被销毁。
3.零:删除对应Cookie。
sessionStorage的使用
//创建
localStorage.setItem('name','张三')//第1种
localStorage.name = '张三';//第2种
// 获取
localStorage.getItem('name')// 张三
localStorage.name; // 张三
// 删除
localStorage.removeItem('name')
delete localStorage.name;
// 清除全部
localStorage.clear();
// 遍历
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i); // 获取本地存储的Key
localStorage[key]; // 获取本地存储的value
}
【本文转自:韩国cn2服务器 http://www.558idc.com/kt.html欢迎留下您的宝贵建议】
//创建
sessionStorage.setItem('name','张三')//第1种
sessionStorage.name = '张三';//第2种
// 获取
sessionStorage.getItem('name')// 张三
sessionStorage.name; // 张三
// 删除
sessionStorage.removeItem('name')
delete sessionStorage.name;
// 清除全部
sessionStorage.clear();