浏览器存储与缓存

• 强制缓存

  • ​Cache-Control

    • private（默认

      • 只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存

    • no-cache

      • 不使用本地缓存。需要使用缓存协商

    • max-age

      • 相对过期时间，不是非常的准确

    • must-revalidate

    • 缓存规则

      • 打开新窗口时

        • 值为private、no-cache、must-validate会重新访问服务器

        • 如果设置了max-age = 5，在设置时间内将不会访问服务器

      • tab页面刷新

        • 均会从服务器访问

      • Expires

        • 过期时间，设置-1时，重载页面均会从服务获取

  • Expires

    • ​例子：Expires: Wed, 22 Oct 2018 08:41:00 GMT 

    • ​表示资源会在该日期后过期

    • ​受限于本地时间，如果修改了本地时间，可能会造成缓存失效

• 协商缓存

  • last-moify

    • ​​Cache-Control优先级高于 expires

    •        第一请求资源时会在header中返回last-modify;
      当浏览器再次发起请求时，会发送该值，服务器根据时间来判断是否命中缓存；
      如果命中这返回304，从缓存中获取数据，并且不返回last-modify

  • Etag

    • 请求时返回的是一个检验码，etag保证每一个资源都是唯一的，资源变化会导致etag重新生成；

    • 一些文件会周期性的修改，但是内容并没有修改，etag不会变，这样就不需要重新访问服务器资源了

• ​cookie和session的区别

  • ​服务端执行Session机制

  • ​生成对应而唯一的session_id(通过对这个session_id的解析和处理，服务端可以找到，该session保存的文件；再从文件中提取出session的信息)

  • ​服务端会将这个session_id发送给客户端

  • ​客户端接受到session_id,以cookie作为保存的容器保存起来

  • ​客户端在每次请求的时候都会带这个session_id给服务端

    服务端自行解析session

• Cookie

  • cookie只能绑定在当前域名下

  • 有效期设置：Max-Age

  • 安全secure=true是只在ssl或者https安全协议下传输

  • HttpOnly=true时，禁止通过js脚本获取cookie；防止xss攻击

  • 发送请求时，cookie会默认带给后端

  • 每个域名下的cookie 的大小最大为4KB，最多20个

• sessionStroage

  • 存在会话中的数据，tab页面关闭就会被销毁

• LocalStorage

  • 持久存在本地，除非删除，否则不过期