HTML5本地存储:SessionStorage, LocalStorage, Cookie

很久没有写技术内容了,是时候继续积累和沉淀了。今天学习一下html5的本地存储。一共有三种,SessionStorage,LocalStorage和Cookie。

他们的异同

1.相同的是他们都是以键值对的形式出现,他们都是本地存储,不会发送到服务器。

2.第一点不同的是cookie每个键值对可以设置过期时间,localStorage是需要手动清除缓存才会消失,sessionStorage在浏览器关闭以后就消失了。第二点不同的是他们的存储空间,cookie一般浏览器允许最大4kb,每个浏览器允许的最多个数也不同,有20,30,40,50的,具体不了解。而另外两者允许大小为5M-10M。

Cookie的操作

1.设置cookie

function setCookie(key,val,expireTime){

var dateTime = new Date();

dateTime.setDate((new Date().getDate()+parseInt(expireTime)));

document.cookie = key+”=”+val+”;expire=”+dateTime.getDate();

}

2.获取cookie

function getCookie(key){

var valStart = document.cookie.indexOf(key+”=”);

if(valStart != -1){

valStart=valStart+key.length+1;

}

var valEnd = document.cookie.indexOf(“;”,valStart);

return document.cookie.substring(valStart,valEnd);

}

 

SessionStorage与Localstorage的操作

这两个的操作很简单了

localStorage.clear();
localStorage.setItem(‘key’, ‘value’);
localStorage.getItem(‘key’); // => ‘value’
localStorage.removeItem(‘key’);
SeccionStorage相同

发表评论

电子邮件地址不会被公开。 必填项已用*标注