浏览器的存储那些事

学习cookie、sessionStorage、localStorage、indexdDB的作用以及运用

一、Cookie

1.1、Cookie诞生的原因

因为HTTP是一种无状态协议，不会保存客户端和服务端之间的通信状态进行保存，于是网景公司的前雇员Lou Montulli在1993年3月的发明了Cookie。

1.2、Cookie两个层面的作用

用于浏览器（客户端）和服务端的交互
客户端自身数据的存储

1.3、Cookie的用武之地

Cookie能使站点跟踪特定访问者的访问次数、最后访问时间和访问者进入站点的路径
Cookie能告诉在线广告商广告被点击的次数，从而可以更精确的投放广告
Cookie有效期限未到时，Cookie能使用户在不键入密码和用户名的情况下进入曾经浏览过的一些站点
Cookie能帮助站点统计用户个人资料以实现各种各样的个性化服务

1.4、Cookie的存储限制

设计初衷不是用来做浏览器存储的，容量只有4kb左右
需要设置过期时间expire
存储能力逐渐被localStorage、sessionStorage取代
通过httponly来设置Cookie不能通过js来读写，防止XSS攻击
Cookie在相关域名下（同源），所有请求都会带上Cookie,造成cdn的流量损耗（静态文件：css、图片、icon等），解决方法：cdn的域名与主站的域名要分开

1.5、Cookie的生成方式

HTTP响应(response)header中携带set-cookie，如果浏览器检测到set-cookie，就会把set-cookie中的cookie值存储到浏览器中。
通过js的方式：document.cookie可以读写cookie

1.6、Cookie的代码实操

使用http-server搭建了一个简单的服务

安装依赖：npm install http-server -D
启动命令：http-server -c-1

1.6.1、简单设置cookie和获取cookie

//简单设置cookie和获取cookie
document.cookie = "username=tan"
document.cookie = "age=18"
console.log(document.cookie)

1.6.2、效果

图片.png

1.6.3、cookie设置2分钟的过期时间

var name = 'one_name';
var value = '123';
var exp = new Date();
exp.setTime(exp.getTime() + 60 * 2000);//过期时间 2分钟
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
console.log(name + "=" + escape(value) + ";expires=" + exp.toGMTString());

escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串

1.6.4、效果

图片.png

1.6.5、domian：

属性名	描述
domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”。

document.cookie = "blogCookie=blog;path=/;domain=.juejin.cn";

将上面代码复制在console控制台中输入，回车便可以在浏览器的cookie中查到username被存在Domain为'".juejin.cn'的域名下。

当我们设置了domain以后，例如www.juejin.cn、www.m.juejin.cn的域名都能访问到这个blogCookie的值，也就是我们可以通过这种方式设置一级域名的cookie，允许二级域名取到一级域名的cookie，来判断用户是否登录过，这样一来就实现了sso单点登录。

1.6.6、httpOnly由后端代码设置，例：

javaEE
response.setHeader("Set-Cookie", "cookiename=value; Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly");

二、localStorage、sessionStorage

Cookie、sessionStorage、localStorage、indexdDB之间的区别总结

特性	Cookie	sessionStorage	localStorage	indexdDB
数据生命周期	一般由服务器生成，可设置过期时间	除非被清理，否则一直存在于浏览器之中	只存在于当前session会话中	除非被清理，否则一直存在
数据存储大小	4kb	5M	5M	无限
是否参与服务端通信	每次都参与	不参与	不参与	不参与