1. cookie缓存
1.1 概念：
-
也叫做小甜饼。类型为“小型文字档案”。
小型——cookie的大小只有4KB左右（即只能存储4KB左右的数据）
文字档案——cookie只能存储字符串 -
指存储在用户本地终端上的数据
按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。
内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的。硬盘Cookie保存在硬盘里，有一个过期时间，除非用户手工清理或到了过期时间，硬盘Cookie不会被删除，其存在时间是长期的。所以，按存在时间，可分为非持久Cookie和持久Cookie。
- 我们第一次访问页面的时候，服务器会通过set-cookie这个响应头，给我们一串字符串，也就是cookie，以后我们访问同源的其他页面时都会带上这个cookie
1.2 cookie的传递
- 每次发送HTTP请求时，会自动把保存在该请求域名下的所有cookie值发送给web服务器（所以无形中增加了流量。）
- 由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。
1.3 cookie的使用场景
1.3.1 购物车
因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么。
所以在用户进行网上购物时，用户浏览了几个页面，选择了商品。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，所以Cookie就是用来记录商品的信息。当用户访问另一个页面，浏览器会把Cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购商品，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的Cookie就行了。
1.3.2 登陆凭据
用户用账号密码登陆一个网站时，如果勾选了“下次自动登录”的选项，那么浏览器就会发送一个包含登陆凭据（用户名和密码的某种加密形式）的cookie到用户的硬盘上。在下一次登陆时，浏览器就会先去硬盘上找有没有cookie，如果cookie还未到期，浏览器就会读取这段cookie，发送给服务器，实现自动登录。
伪造cookie
上面的场景涉及一个安全问题。cookie是可以伪造的。
浏览器在给服务器发送某用户的cookie时，如果被别人截获，然后他伪造一个数据包发送过去，服务器仍然认为该数据是合法的。
并且，如果设置了cookie的有效时间，cookie被保存在了用户的硬盘上。如果有人侵入你的硬盘，拷走你的cookie，然后放到他自己的浏览器下面，他就可以使用你的登陆凭据来登陆你的账号。
1.4 cookie的有效期
默认情况下，一旦用户关闭浏览器，cookie保存的数据就会丢失。
但可以自己设置过期时间来延长cookie的有效期：
-
max-age属性：
Max-Age=<max-age-in-seconds>"
例：document.cookie = "name=mycookie;Max-Age=60"
上面的代码设置了cookie会在1分钟以后过期 -
expires属性
expires=date-in-GMTString-format
例:document.cookie = "name=mycookie;expires=Fri, 31 Dec 2019 23:59:59 GMT"
上面的代码设置了cookie会在2019年的12月31号23:59:59时过期。
这种方法有个bug，就是用户如果更改了本地时间，expires会发生混乱，所以已经不怎么使用了。 -
未设置有效期的cookie会在会话结束（浏览器关闭）时消失。
2. session
2.1 概念
- 中文是 会话
开发者为了实现中断和继续等操作，将 user agent 和 server 之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是 session 的概念。
Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中
- cookie是session的一种实现方法
2.2 sessionID
由于cookie完全暴露，容易被截获篡改，所以我们不能把用户的信息（账号密码等）直接存在cookie里。
服务器通过cookie给用户一个sessionID，sessionID对应服务器里的一小块内存。每次用户访问服务器的时候，都会发送当前会话的sessionID，服务器就根据当前的sessionID判断相应的用户数据标识，以确定用户是否有权限获取某个数据。去数据库里面拿到对应的用户信息。
sessionID是服务器与客户端建立连接时，随机分配的，一般不会有重复。
2.3 session与cookie的区别和联系
- cookie数据保存在客户端，session数据保存在服务端（服务器）
- session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效。
3. localStorage
3.1 概念
- 它是有HTML5提供的一个API
- 主要用作本地存储，即它也是在客户端（浏览器端）保存
- 不会把数据发送给服务器，仅在本地保存
- 实质上是一个哈希（hash）
- 存储空间为5MB左右（在不同浏览器中会有所不同）
- localStorage与HTTP无关，HTTP不会带上localStorage的值
- localStorage永久有效，除非用户清理缓存
3.2 API
- setItem()
localStorage.setItem('myCat', 'Tom')
下面的代码片段访问了当前域名下的本地 storage对象，并增加了一个数据项目。 - getItem()
let cat = localStorage.getItem('myCat')
读取localStorage项目 - removeItem()
localStorage.removeItem('myCat')
移除了localStorage里 “myCat”这一项 - clear()
localStorage.clear()
移除所有的localStorage项目（清空）
4. sessionStorage
它与localStorage基本相同。
区别在于：
localStorage: 存储的数据是永久性的，除非用户人为删除否则会一直存在。
sessionStorage: 与存储数据的脚本所在的标签页的有效期是相同的。一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删除。
5. UserData、GlobalStorage、Google Gear
- UserData： IE浏览器专属，不需要安装额外插件，仅在IE下有效。
- GlobalStorage： 适用于Firefox 2+的浏览器
- Google Gear： 谷歌开发出的一种本地存储技术，需要安装Gear组件。
网友评论