localstorage、sessionstorage、cookie的用法及区别

一、localstorage

注意保存时 转成JSON字符串类型 如果不转 他会自动调用 .toString()方法

（1）设置localstorage

localStorage.setItem('键','值')

 （2）获取localstorage

localStorage.getItem('键')

 （3）删除localstorage

localStorage.removeItem('键')

（4）清除所有localstorage 

localStorage.clear()

二、sessionstorage 

和localstorage语法一致 只需把localstorage缓存sessionstorage

三、cookie

（1）设置cookie

会话cookie

document.cookie='name=值';

有效期

function setCookie(name,value,day)
{
var Days = day;
var exp = new Date(); 
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
setCookie('键','值',8)

（2）获取cookie

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}

（3）删除cookie

function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

四、区别

区别	localstorage	sessionstorage	cookie
存储时间	永久存储，不手动删除，永远存在	关闭当前页面就会消失	如果不设置时间，关闭浏览器消失
大小	5MB	5MB	4KB
作用域	可在同源相同浏览器下共享	不可共享	可在同源相同浏览器下共享