cookie localStorage与sessionStorage的使用及区别

Posted 2020-10-03 MrWwwu

cookie是储存在用户本地终端上的数据,意思就是能把用户的一些文字信息储存下来,但是cookie的储存空间特别小,一个浏览器能创建的 Cookie 数量最多为 300 个，并且每个不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个,因此现在越来越少的人使用cookie了,下面讲解一下cookie的用法吧,在使用cookie的时候我们需要先设置cookie

function setCookie(name, value) {

var Days = 30;//cookie的存储时间为30天

var exp = new Date();

exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);

document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

setCookie("性别", "男"); //存储name为性别,value为男的cookie

接下来我们如果使用需要获取cookie:

function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if(arr = document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

var a=getCookie("性别");//获取名为性别的cookie

console.log(a);

接下来我们删除cookie

function delCookie(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);//此句代码告诉我们在删除cookie之前我们需要先获取cookie

if(cval != null)

document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

delCookie("性别");//删除名为性别的cookie

接下来我们来说一下localStorage与sessionStorage的区别

两者都有大约5M的存储空间,并且使用频率比较高,两者的最主要的区别就是存储期限,localStorage存储的数据为持久数据,而sessionStorage当你关闭浏览器的时候数据就没了

if(window.localStorage){ //兼容

//alert("浏览器支持");

var local=window.localStorage;

local.setItem(‘name‘,‘wu‘);

local.name2=‘Mr.Wu‘;

local.setItem(‘name2‘,‘Mr.Wu‘);//修改(再存储一遍);

localStorage.removeItem("name");//清除

localStorage.clear();//全部清除

}

 

if(window.sessionStorage){

//alert("浏览器支持");

var session=window.sessionStorage;

session.setItem(‘name‘,‘wu‘);//设置存储

session.name2=‘Mr.Wu‘;//设置存储

session.setItem(‘name‘,‘Mr.WuGe‘);//修改(再存储一遍);

sessionStorage.removeItem("name");

sessionStorage.clear(); 

}

以上两个代码可以直接拿来用的 用此代码可以实现存储效果了