前端缓存笔记

title: Session/LocalStorage/Cache-Control/Expires/ETag
date: 2018-06-11 17:33:05
categories:

 

  • HTTP
    tags:
  • HTTP

 


Session 与 Cookie 的关系与区别

 

关系:

 

Session 基于 Cookie 实现的.

 

区别:

 

Cookie 保存在客户端,每次都随请求发送给 Server.
Session 保存在 Server 的内存里,其 Session ID 是通过 Cookie 发送给客户端的.

 

 

  1. 服务器通过 Set-Cookie 头给客户端一串字符串;
  1. 客户端每次访问相同域名的网页时,必须带上这段字符串;
  1. 客户端要在一段时间内保存这个Cookie.
  1. Cookie最大存储量4K.
  1. Cookie默认在用户关闭页面后就失效,后台代码可以任意设置 Cookeie 的过期时间.

 

什么是Seesion?

 

  1. 服务器将SessionID(随机数)通过Cookie发给客户端;
  1. 客户端访问服务器时,服务器读取SessionID;
  1. 服务器有一块内存(哈希表)保存了所有Session
  1. 通过SessionID我们可以得到用户的隐私信息,如id,email;
  1. 这块内存(哈希表)就是服务器上的所有session.

 

localStorage

 

什么是localStorage?

 

持久化存储

 

HTML5里的API
window.localStorage

 

方法:

 

  1. localStorage.setItem();
  1. localStorage.getItem();
  1. localStorage.removeItem();

 

特点:

 

  1. localStorage 跟 HTTP 无关;
  1. HTTP不会带上 localStorage 的值;
  1. 只有相同域名的页面才能互相读取 localStorage(没有同源那么严格);
  1. 每个域名localStorage 最大存储量为5 MB 左右 (每个浏览器不一样);
  1. 常用场景: 记录有没有提示过用户 (没有用的信息,不能记录密码);
  1. localStorage 永久有效,除非用户清除缓存.

 

LocalStorage与Cookie的区别.

 

Cookie在客户端每次发送请求跟服务器响应都会带上,通过服务器设置过期时间,最大4KB.
LocalStorage跟HTTP无关,请求时不会带上它的值,它永久有效.最大5MB.

 

SessionStorage(会话存储)

 

  1. SessionStorage 跟 HTTP 无关;
  1. HTTP不会带上 SessionStorage 的值;
  1. 只有相同域名的页面才能互相读取 SessionStorage(没有同源那么严格);
  1. 每个域名lSessionStorage 最大存储量为5 MB 左右 (每个浏览器不一样);
  1. SessionStorage 在用户关闭页面(会话结束)后失效.

 

SessionStorage与LocalStorage区别

 

LocalStorage永久有效,SessionStorage页面关闭后失效.

 

HTTP 缓存(Cache)

 

Cache-Control

 

用来区分对应缓存机制的支持情况,在请求头和响应头都支持这个属性.

 

假如在缓存有效期内,对于同样的URL,浏览器不会对服务器发出HTTP请求,而是从内存中获取数据.

 

时间是经过多久时间后过期.

 

更新缓存

 

可以做入口改动,利用URL的查询参数更新缓存.
比如:
在HTML文件里改对应文件的URL.,

 

为什么首页不能设置Cache-Control

 

因为用户不能从服务器中获取最新网页.

 

Expires

 

如果设置Cache-Control那么Expires会被忽略.

 

时间是一个时间点,即几分几秒过期,时间指的是本地时间,不靠谱.

 

MD5

 

一个摘要算法

 

Bash里 输入md5 文件名即转成MD5.

 

如果内容差异越小,那么MD5值越大.

 

ETag

 

服务器返回一个ETag,内容是MD5给浏览器,浏览器下次发送请求时,请求时带上请求头if-none-match,那么内容不需要下载,服务器返回状态码304,304返回的第四部分是空的.

 

Cache-Control和ETag

 

Cache-Control是未过期不发送请求,ETag是发送请求假如不匹配,但是不返回内容,即响应体是空的.

本文原创,商业转载请联系作者获得授权,非商业转载请注明出处。

评论

发送评论 编辑评论


                        

前端技术分类热门文章

标签热门文章排行

☛免责声明 ☛本站使用教程
Theme Argon With Ry-Plus By 清欢
我的第15835位朋友,历经89179次回眸才与你相遇