localstorage、sessionStorage和cookie的区别是什么？

这是我参与「4月日新计划更文活动」的第27天。

今天跟大家聊一下localstorage、sessionStorage和cookie的区别，并且演示一下他们分别怎么使用。

cookie

从时间顺序来看，cookie产生的时间是最早的。但是因为受限于当时计算机技术的发展限制，存储的空间只有4KB，并且可以自己设置过期时间。

通常我们在使用cookie解决问题的时候通常会通过自己封装操作cookie的方法

下面，我将自己封装的方法展示给大家。

<script>
function getCookie(key){
	let strC = document.cookie;
	let arrC = strC.split("; ");
	for(var i = 0;i<arrC.length;i++){
		if(arrC[i].split("=")[0] === key){
			return arrC[i].split("=")[1];
		}
	}
	return "";
}

function setCookie(key,val,ops){
	ops = ops || {};
	let e = "";
	if(ops.expires){
		var d = new Date();
		d.setDate(d.getDate() + ops.expires);
		e = ";expires="+d;
	}
	let p = ops.path ? ";path="+ops.path : "";
	document.cookie = `${key}=${val}${p}${e}`;
}

function removeCookie(key,ops){
	ops = ops || {};
	ops.expires = -1;
	setCookie(key,"hsa",ops);
}
</script>

javascript的原生方法是通过document.cookie="a=111;b=222"这样的方法进行设置的。然后我们在getCookie的时候直接对获取的数据进行切割，然后返回切割之后的值。

cookie是能够设置有效时间的，所以我们在setCookie的时候也要记得把有效时间加上。然后再通过document.cookie="a=111;b=222"的方式设置cookie值。

removeCookie方法的封装是借助于setCookie，将我们传入的key值设置一个过去的有效时间，让他过期就可以将对应的cookie移除了。

localstorage和sessionStorage

跟cookie相比，localstorage和sessionStorage的存储空间都更大，大概有5MB。并且localstorage不能设置有效时间，时效长期存在，一直到自己手动删除。

而sessionStorage的有效时间是在当前会话销毁之前，也就是浏览器窗口被关闭的时候会被清除。

用作用的范围来看，

cookie能够作用域整个域名，在浏览器和服务器之间相互传输，并且把cookie带到服务器端存储起来。

而localStorage和sessionStorage的作用范围只能在当亲的文档区域内，也就是在当前域下面才能进行信息的传输(不理解域的概念的可以看我往期的文章，里面有3篇专门讲跨域的内容)

从安全性上来看，

cookie的安全性比storage的安全性更低，很容易被伪造的签名通过跨站攻击。但是storage得存储方式也要注意会被诸如脚本和跨站攻击。

在使用方式上来看，

上面也说了，cookie一般是通过document.cookie的方式完成读写操作。

而storage是通过localstorage.getItem和localstorage.setItem的方式读取和写入本地缓存数据。

同理，sessionstorage.getItem和sessionstorage.setItem的方式读取和写入暂时缓存的数据。

以上，就是今天我对localstorage、sessionStorage和cookie使用的一些总结。

看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。