浏览器的缓存机制

cookie

• cookie 机制

web程序是使用http协议来传输数据的，而它是一种无状态的协议，一旦数据交换完毕以后，客户端与服务器端的连接就会断开，再次交换数据需要重新建立连接，这么说的话就无法跟踪到上一次连接的会话（ 例如即用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了）因此要跟踪该会话，首先就出现了cookie会话机制

• cookie 是什么

cookie 实际上是一小段的文本，每当客户端向服务器请求数据时，服务器为了标记客户信息，在返回响应资源的同时，也会给发一个cookie个客户端，客户端浏览器把该cookie保存起来，当浏览器再次请求该网站时，浏览器就会把请求地址连同该cookie一起提交给服务器，以此来辨认用户的状态

• 生命周期

如果不在浏览器中设置过期的时间，cookie 会被保存在内存中，生命周期随浏览器的关闭而结束；
如果设置了过期的时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

应用场景

（1）自动登录或记住密码

（2）保存上次查看的界面

（3）保存上次登录的时间等信息

不足之处

• cookie

（1）大小受限

（2）用户可以操作（禁用）cookie，使功能受限

（3）安全性较低

（4）每次访问都要传送cookie给服务器，浪费带宽。

session

• session是什么

session 是另一种记录客户状态的机制，区别于cookie，session 是保存在服务器上的，客户端浏览器第一次访问服务器的时候，服务器会把客户端信息以某种形式记录在服务器上，当客户端再次访问时只需要从该Session中查找该客户的状态就可以了

需要注意只有访问JSP、Servlet等程序时才会创建Session，只访问HTML、IMAGE等静态资源并不会创建Session。

• 对浏览器的要求

虽然session 是保存在服务器的，但是它对客户端是透明的，它的正常运行还需要客户端的支持，服务器通过向客户端发送一个名为 sessionid 的 cookie ，依据该Cookie来识别用户状态

• 生命周期
  浏览器中的session 的生命周期跟随着cookie

cookie & session 的比较

【存储内容】

cookie只能保存字符串类型，以文本的方式；
session能支持任何类型的对象(session中可含有多个对象)

【存储大小】
cookie：单个cookie保存的数据不能超过4kb；
session大小没有限制

【安全性】
针对cookie所存在的攻击：Cookie欺骗，Cookie截获；
session：sessionID存储在cookie中，sessionID是要有人登录，或者启动session_start才会有，因此它的安全性大于cookie

应用场景

• session

（1）网上商城中的购物车

（2）保存用户登录信息

（3）将某些数据放入session中，供同一用户的不同页面使用

（4）防止用户非法登录

不足之处

• session

（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

WebStorage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

• 生命周期

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。

• 存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

• 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

• 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

• 获取方式：
  localStorage：window.localStorage;；
  sessionStorage：window.sessionStorage;。

• 应用场景：
  localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
  sessionStorage：敏感账号一次性登录；

https://www.cnblogs.com/liuwei0824/p/7699632.html
https://www.cnblogs.com/cencenyue/p/7604651.html