sessionStorage、localStorage、cookie方法小结

版权声明：转载请注明出处。 https://blog.csdn.net/zeroyulong/article/details/83383921

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

一、sessionStorage

sessionStorage.setItem("key","value");//存储key,value
sessionStorage.getItem("key","value");//获取指定key本地存储的值
sessionStorage.removeItem("key","value");//删除
sessionStorage.clear();//清除所有的key/value

二、localStorage

localStorage.setItem("key","value");//存储key,value
localStorage.getItem("key","value");//获取指定key本地存储的值
localStorage.removeItem("key","value");//删除
localStorage.clear();//清除所有的key/value

三、cookie

1.设置cookie

function setCookie(name, value) {
	var Days = 30;
	var exp = new Date();
	exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
	document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString();
}
setCookie("name", "zero");

2.读取cookie

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

//设置有效期的cookies
function setCookieTime(name, value, time) {
	var strsec = getsec(time);
	var exp = new Date();
	exp.setTime(exp.getTime() + strsec * 1);
	document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString();
}

function getsec(str) {
	
	var str1 = str.substring(1, str.length) * 1;
	var str2 = str.substring(0, 1);
	if(str2 == "s") {
		return str1 * 1000;
	} else if(str2 == "h") {
		return str1 * 60 * 60 * 1000;
	} else if(str2 == "d") {
		return str1 * 24 * 60 * 60 * 1000;
	}
}
setCookieTime("person","sshuo","s5");
setTimeout(function(){
	console.log(getCookie("person"));
},8000);

3.删除cookie

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