cookie、sessionStorage、localStorage

2023年2月10日 113次阅读 来源: mingo

之前只知道cookie、sessionStorage、localStorage的一些存储量，过期时间上的区别，今天仔细研究了一下它们用法上的区别。

cookie

cookie的本质是在绑定的特定的域名下的。当服务器发送的HTTP响应头中包含cookie会话信息时（{key,value}形式），浏览器会保存这样的会话信息，并在再次给创建它的域名发送请求时，都会包含这个cookie。这个限制确保了储存在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。

JavaScript中的cookie

在JavaScript中操作cookie有点复杂，因为只有BOM的document.cookie属性，返回页面可用的所有cookie的字符串，一系列有逗号分隔开的键值对。
document.cookie属性可以设置新的cookie字符串，并不会覆盖cookie，除非cookie的名称已经存在。

cookie中所有的名字和值都是经过URL编码的，所以必须使用decodeURIComponent()来解码。

由于JavaScript中读写cookie不够直观，所以需要封装一些方法来方便cookie的操作。例如：读、写、删除操作。

设置cookie:

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

读取cookie

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

删除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();

}

这样封装起来就很方便使用啦！

sessionStorage和localStorage

sessionStorage和localStorage都是在HTML5中提出的，都是以window对象属性的形式存在，用来在客户端存储会话数据。
sessionStorage和localStorage都是Storage类型的实例。所以它们有clear()、getItem(name)、key(index)、removeItem（name）、setItem(name，value)方法。

sessionStorage对象存储特定于某个会话的数据，也就是该数据只保存到浏览器关闭。localStorage属于永久性存储。切它们的存储量也大于cookie，因浏览器而已，基本可以达到有5M。

sessionStorage和localStorage只能存储字符串类型数据，无法直接存储数组类型和JSON对象，如果有需求该怎样做呢？其实也很简单。
首先将JSON对象通过JSON.stringify()方法转换成字符串，再存储到sessionstorage中，然后通过JSON.parse()方法将字符串转换成JSON格式即可。

    原文作者：mingo
    原文地址: https://segmentfault.com/a/1190000015684489
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞