Cookie、WebStorage

Cookie

HTTP是没有状态的协议(stateless),信息记录通过Cookie来记录。

Cookie的定义

Cookie是一张包含键值对的表格。Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。

Cookie的创建

当服务器收到HTTP请求时,服务器可以在响应头里,添加一个Set-Cookie选项,服务器通过该头部告知浏览器保存Cookie信息。

接下来浏览器对该服务器发起的每一次新请求,浏览器都会将之前保存的Cookie信息,通过Cookie请求头部再发送给服务器。

Cookie的应用场景

1. 用户追踪

服务器可以设置或读取Cookie里包含的信息,借此确认用户跟踪中用户的状态;

因为HTTP协议是无状态的,为实现交互,使用Cookie记录;
比如网上购物时,用户选购一个商品,服务器向用户发送网页时会发送一段记录商品信息的Cookie,当用户访问另一个页面,浏览器就会把Cookie发送给服务端,这样服务器就知道用户选购了什么。

2. 用户登录

登录网站勾选“下次自动登录”时,下次访问就不用再输入密码等信息。

第一次登录时,如果勾选自动登录,服务器就会发送含有登录凭证(用户和密码的某种加密行形式)的Cookie到用户的设备上。第二次登录的时候,浏览器会携带该Cookie访问页面,服务器验证后,就不会再次输入用户名和密码。

Cookie的两种类型

1. 会话期Cookie(Session Cookies)

保存在内存中,不用设置过期时间。
只有在浏览器窗口或者标签页打开的时候才会存在。

应用场景:

可以用来验证银行账号用户的的身份。
当登录的用户,关闭当前标签页后,标识身份信息的Cookies就会被清除掉。

2. 持久性Cookie(Permanent Cookies)

保存在用户硬盘里,可以设置过期时间,到达时间会被清除。

应用场景:

用来记录用户在某个网站上的习惯,从而为用户展现不同的网页内容。

在哪里可以看到Cookie

chrome:Settings -> Advanced -> Privacy and security -> Site Setting -> Cookies -> See all cookies and site data 

为什么Cookie通常不放在服务器上

会增重服务器的负担,网站有很多的信息需要用Cookie记录,比如添加到购物车里的商品,用户访问了哪些页面,用户填写的各种表单信息等。

在客户端端使用Cookie,可以在用户每次访问页面或者登陆的时候,携带Cookie信息,而且Cookie可以保存任意长的时间。因此,在服务端用Cookie存储信息是一个比较合理的方案。

Cookie与WebStorage的区别及联系

Cookies和LocalStorage区别

不同点

Cookie LocalStroage
存储大小 4KB 5MB
http请求 自动携带保存的数据 不会自动携带保存的数据
存储位置 客户端和服务端 客户端
数据有效期 可以设置过期时间 没有过期时间,除非手动清除
安全性 会包含在请求头发送到服务器 不会发送到服务器,安全性相对较高,不用担心数据截获,仍然存在伪造问题
实用性 需要自己封装方法 WebStorage提供操作方法,操作相对比较方便

相同点

都可以保存在浏览器上

LocalStorage和SessionStroage可一看作Cookie的升级版;
LocalStorage和SessionStroage只能存在在客户端,Cookie也可以存在服务端;

LocalStorage和SessionStorage区别

LocalStorage的信息会在关闭页面或者浏览器时保存下来;
SessionStorage的信息不会在关闭页面或者浏览器时保存下来;

WebStorage的优点

SessionStorage和LocalStorage统称为WebStorage。

1. 减少请求次数
   将数据保存在本地后,可以避免向服务器发送不必要的数据
2. 显示数据快
   浏览器本身会有缓存,可以从本地可以直接读取数据,比服务获取数据快
3. 临时存储
   某些数据只需要在用户浏览当前页面时使用,关闭页面就可以丢弃(SessionStorage)

SessionStorage数据清除时机

SessionStorage的过期时间是无法设置的。

在不用的标签页/窗口打开同一个URL地址会分别创建不同的SessionStorage;
关闭标签页/窗口会结束对话并清除SessionStorage;