cookie、sessionStorage、localStorage

xuweijian 发布于2019-08-22 18:48 / 1360人阅读

摘要：之前只知道的一些存储量，过期时间上的区别，今天仔细研究了一下它们用法上的区别。这个限制确保了储存在中的信息只能让批准的接受者访问，而无法被其他域访问。中所有的名字和值都是经过编码的，所以必须使用来解码。属于永久性存储。

之前只知道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格式即可。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96231.html

cookie、Sessionstorage、Localstorage快速上手

摘要：快速上手先说区别数据大小不能超过。可以在后端设置修改，数据仅在本地浏览器保存。数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。默认情况下，属于当前页面。 cookie、Sessionstorage、Localstorage快速上手先说区别 cookie: 数据大小不能超过4KB。不管是否有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器中来回传递，...

duan199226 2019-08-20 17:49 评论0 收藏0
详说 Cookie, LocalStorage 与 SessionStorage

摘要：顾名思义，确实非常小，它的大小限制为左右，是网景公司的前雇员在年月的发明。是标准中新加入的技术，它并不是什么划时代的新东西。特性与的接口类似，但保存数据的生命周期与不同。但当页面关闭后，中的数据就会被清空。本文最初发布于我的个人博客：咀嚼之味最近在找暑期实习，其中百度、网易游戏、阿里的面试都问到一些关于HTML5的东西，问题大多是这样开头的：你用过什么HTML5的技术呀？...

endless_road 2019-08-21 10:31 评论0 收藏0
localStorage、sessionStorage、Cookie的区别及用法

摘要：的区别及用法是本地存储，存储在客户端，包括和。仅在当前会话下有效，关闭页面或浏览器后被清除。源生接口可以接受，亦可再次封装来对和有更好的支持。但需要程序员自己封装，源生的接口不友好。每个最多只能有条，每个长度不能超过。 localStorage、sessionStorage、Cookie的区别及用法 showImg(https://segmentfault.com/img/bVYLlH...

sf_wangchong 2019-08-21 17:41 评论0 收藏0
cookie、Sessionstorage、Localstorage快速上手

摘要：快速上手先说区别数据大小不能超过。可以在后端设置修改，数据仅在本地浏览器保存。数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。默认情况下，属于当前页面。 cookie、Sessionstorage、Localstorage快速上手先说区别 cookie: 数据大小不能超过4KB。不管是否有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器中来回传递，...

Galence 2019-08-20 17:49 评论0 收藏0