详解JS浏览器储存

引言

随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie、LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢。

Cookie

Cookie的来源

Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份。众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器不知道这这些请求来自于谁。比如你向购物车里面添加了一些商品,但是当发送结账请求的时候服务器懵了,我怎么知道你是谁,你买了什么呢。而使用 Cookie 之后,服务器就可以通过查看 Cookie 来判断发送用户,一定程度上 Cookies 可以说是请求的身份证。可以告诉服务器请求发送自谁。

Cookie是什么

百闻不如一见,直接来看看 Cookie 长啥样

这是百度首页使用的 Cookie ,如你所见,Cookie 是以 Name-Value 键值对储存在浏览器中的,其中 Value 又是明显经过了加密的数据。

Cookie生成方式

Cookie 是所属于域名的,还是百度首页的 Cookie,通过 Domain 属性可以得知前两个 Cookie 是属于 .baidu.com 的

每个域名只能设置与访问到自己域名下的 Cookie,比如 baidu.com 无法访问 Domain 为 sougou.com 的 Cookie。但是子域名可以读取父域名设置的Cookie,比如截图中 www.baidu.com 就读取到了 Domain=".baidu.com" 的Cookie,通过手动设置 Domain 可以设置父域名的 Cookie,比如 www.baidu.com 可以设置Domain="baidu.com"这样 *.baidu.com 所有二级域名也能读取到它设置的 Cookie

//www.baidu.com

document.cookie="age=20;domain=.baidu.com"

// 此时 所有二级域名可以直接读取到这个 Cookie

Cookie的生成方式分为 服务器端生成和浏览器端生