浏览器端数据存储之Cookie、localStorage、sessionStorage

时间:2022-02-25 04:44:56

Cookie、localStorage、sessionStorage都是存储在浏览器端会话数据,接下来分别详细介绍三种机制。
一、cookie

1、什么是cookie

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。cookie的作用是保存客户端上用户的信息包括登陆信息、偏好设置或者其他数据。在我一篇HTTP协议的文章中提到过Cookie,由于HTTP协议是一种无状态协议,每一次请求之间没有都是独立的,那么要保存用户的会话信息的话,就要在每一次HTTP请求过程中附带上Cookie发送给服务器。下面是我用fiddler获取www.qq.com的请求数据:

GET http://www.qq.com/ HTTP/1.1
Host: www.qq.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:51.0) Gecko/20100101 Firefox/51.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://e.firefoxchina.cn/?cachebust=20160321
Cookie:pt2gguin=o1137567854;ptcz=7d097f461558c3395939a07e244fef634e4f53ff88165b697835e925ffbf6df8; tvfe_boss_uuid=144c3d24ad91e75b; pgv_pvid=1738290900; o_cookie=1137567854; pgv_pvi=6978680832; RK=t12WR4aufe; ts_refer=e.firefoxchina.cn/; ts_uid=1209845192; pac_uid=1_1137567854
Connection: keep-alive
Upgrade-Insecure-Requests: 1

2、cookie的构成

名称:唯一确定一个cookie的名称。而且不区分大小写;经过URL编码。
值:存储在cookie的字符串。经过URL编码。如上面的ptcz=7d097f461558c3395939a07e244fef634e4f53ff88165b697835e925ffbf6df8;
域名:说明cookie在哪个域名下有效
路径:指定域中哪个路径对服务器发送cookie。比如指定http://www.qq.com/s/,下才能访问cookie,那么就不会向http://www.qq.com/发送cookie。
失效时间:指定cookie失效的日期。接受的是GMT格式的时间,可以用toGMTSting函数将其他时间格式转换为GMT格式的时间。如果设置了一个以前的时间。那么这个cookie立刻消失。
安全标志:直接指定为secure.表示只有在SSL连接时候才发送给服务器。也就是在HTTPS协议的时候才会发送cookie到服务器上。来看一条完整的cookie

Set-Cookie: IPLOC=CN4403; expires=Tue, 13-Mar-18 07:54:07 GMT; domain=.sogou.com; path=/

这是抓取百度的一条响应头信息里面的cookie。可以看到
名称: IPLOC,
值: CN4403。
失效时间为: 13-Mar-18 07:54:07 GMT。
域名为:.sogou.com
路径: 当前路径,也就是在整个域名下
安全标志: 没有
注意:
i:存储规则
一条cookie信息要遵循比较严格的模式,这是因为js下面所有的cookie值是保存在document.cookie下面的一个字符串里面。这样的话对于我们存取cookie值是非常不便的。为了能更好的存取cookie我们要有一种规定的格式。设置cookie的时候格式按照HTTP响应中set-cookie中顺序和格式。每一段信息都使用分号加上空格的方式分隔。等会再构造存取cookie时会详细讲解。
ii:哪些数据发送到服务器
只有名称和值会发送到服务器。其他属性只是服务器给浏览器的一个提示。

3、浏览器对cookie的限制
为了限制cookie不会被恶意用,以及不会占用太多磁盘空间,而且因为每一次请求的时候都要带上cookie,太多cookie会影响请求的性能。如此不同的浏览器会对cookie的数量和空间有响应的限制措施:
浏览器端数据存储之Cookie、localStorage、sessionStorage

4、js中的cookie
js中cookie是一种不太友好的处理方式。它将所有的cookie存放在了docunment.cookie的字符串里面。比如:

name1=value1;name2=value2;name3=value3

而且js在设置一个cookie值得时候是这样的:

document.cookie="name=周运金";

这样并不会将之前的cookie值覆盖掉,这点需要理解。而且在设置cookie的时候只有名称和值是必须的。默认的过期时间实在你浏览器会话结束时间。上面提到过名称和值都必须经过URL编码,但是这里正好不需要进行URL编码(只有字母和数字[0-9a-zA-Z]、一些特殊符号”$-_.+!*’(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL)
js采用encodeURComponent(string)函数进行编码。
比如设置一条cookie可以采用:

document.cookie=encodeURComponent("name")+"="+encodeURComponent("周运金")+"; domain=.yjblog.cn; path=/; expires="+(new Date("May 1,2017")).toGMTString();

5、JS中存取cookie的类
该类中封装了cookie的三种操作:读取、写入、删除;

var CookieUtil = {
// 设置cookie
set : function (name, value, expires, domain, path, secure) {
var cookieText = ""; //要设置的cookie字符串
cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value); //名称和值是必选参数,下面的可选
if (expires instanceof Date) { //检查时间是否标准格式
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
// name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
// 获取cookie
get : function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = ""; //记得URL解码
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf (";", cookieStart); //以;为标志,记得从cookieStart位置开始查找字符串
if (cookieEnd == -1) {//如果没有;说明到字符串尾部了
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));//注意这里等号已经被跳过了,cookieStart + cookieName.length已经是从值得第一个字母开始了
}
return cookieValue;
},
// 删除cookie
unset : function (name, domain, path, secure) {
this.set(name, "", Date(0), domain, path, secure);
} //cookie的删除其实是将时间设置为过期
};
//设置cookie
CookieUtil.set("name","周运金");
CookieUtil.set("names","李佳家",new Date("May 1,2017"),"/s/",".yjblog.cn","secure");

//读取cookie
alert(CookieUtil.get("name"));
alert(CookieUtil.get("names"));

//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("names");

//设置安全cookie
CookieUtil.set("names","李佳家",null,null,null,"secure");
//中间的参数用null填充,但是不能空缺

6、Cookie注意事项
i、存储太多cookie影响HTTP请求的性能
由于所有的cookie又会有浏览器作为请求头发送,所以cookie存储大量的诗句会影响到请求的性能,浪费带宽。cookie信息越多,请求的时间将越长,这是我们应该避免的。尽管浏览器对cookie做了限制,但是我们开发者应该在cookie少存储信息。(这就是需要Web Storage)
ii、安全性
由于HTTP采用的是明文模式,从我之前的关于通过xss攻击获取cookie
的文章可以看出,cookie的信息很容易被获取。所以对于一些敏感的数据比如用户账号密码、信用卡密码等都不要存放在cookie里面。
iii、数据丢失
当超过cookie限制的时候,有些浏览器如火狐会随机删除掉一些cookie以腾出空间给新的cookie,IE和Opera智能一点,会删除比较少用的cookie。
iiii、有些状态不可能保存在客户端
为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。(这个就需要session来做了)

针对cookie大小限制以及数据量大会浪费带宽,HTML5标准出现了Web Storage克服cookie带来的限制。当数据被严格控制在客户端时,无需持续低将数据发回服务器。它的出现有两个主要的目的
1、提供一种在cookie之外存储会话数据的途径。
2、提供一种存储大量可以跨会话存在的数据机制。
主要有两种类型:sessionStorage、localStorage

二、sessionStorage与localStorage
1、什么是sessionStorage与localStorage?
从上一段中也可以大概猜出什么是sessionStorage/localStorage了。sessionStorage是类似于cookie可以将数据存储在浏览器端的一个对象。但是它不像cookie一样被发送到服务器,也因为这样sessionStorage有更大的容量,最大可以达到8M,适合存储比较大的数据。
2、sessionStorage的用法(包括localStorage的用法)
setItem存储value

用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:

sessionStorage.setItem("name", "周运金"); 
localStorage.setItem("name", "李佳家");

getItem获取value

用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

var value = sessionStorage.getItem("name"); 
var site = localStorage.getItem("name");

removeItem删除key

用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:

sessionStorage.removeItem("name");  localStorage.removeItem("name");

clear清除所有的key/value

用途:清除所有的key/value
用法:.clear()
代码示例:

sessionStorage.clear(); 
localStorage.clear();

其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage;
storage.name= "周运金";
console.log(storage.name);
console.log(storage["name"]);

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i); //先获取键名
var value = storage.getItem(key); //获取键值
console.log(key + "=" + value);
}

甚至还可以用for in遍历

for(var key in sessionStorage){
var value =sessionStorage.getItem(key);
alert(key+"="+value);
}

每次循环key会向指针一样指向sessionStorage的下一个键名。
3、storage事件

if(window.addEventListener){             window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){
e=window.event;
}
}

3、二者的区别
i、作用域
相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是sessionStorage只能在同源(相同域名相同端口)同窗口访问,但是当sessionStorage在同一窗口下转到同源页面还是可以访问的,因为这时候还是同源同窗口,不要单纯理解为两个不同的页面之间不能访问相同sessionStorage。比如你在A网页设置了一个sessionStorage的值,然后你同时在新的窗口下打开B网页,这时候你尝试在B网页得到A网页设置的sessionStorage是不可以的,但是当你在A网页跳转到B网页的时候,这时候你会发现B网页可以访问A网页中的sessionStorage。所以sessionStorage针对的是同源同窗口,不是同源同页面。
ii、生命周期
localStorage生命周期是永久,这意味着除非用户自己清除localStorage信息或者用户清除浏览器缓存,否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

总结:
cookie与sessionStorage、localStorage的区别
1、cookie可以在浏览器端与服务器端之间通信,是服务器端获取用户信息、保持一种持久客户端状态的关键。而sessionStorage、localStorage
虽然也可以保存会话数据,但是不能与服务器端进行信息交换。
2、cookie的容量比较小。而sessionStorage、localStorage有较大的容量
3、试用的浏览器范围不同。由于sessionStorage与localStorage是HTML5标准推出的,所以在IE7以及IE7以下的版本不适用。替代方案是采用IE的userData.(有兴趣可以了解一下)
最后:sessionStorage、localStorage的出现正好弥补了了cookie由于大小限制带来的问题,三者相辅相成为浏览器存储数据提供了更好的解决方案。