浏览器持久化存储与HTTP缓存

本文主要学习一些HTTP高级知识，例如Session、LocalStorage、Cache-Control、Expires、ETag

主要是涉及到浏览器持久化存储和HTTP缓存的一些技术

Cookie自身存在问题，用户能随意篡改Cookie获得其它用户的隐私信息，为了解决这个问题出现了基于Cookie来实现的Session。

一 Session

Session实质上就是一块内存，如果有需要可以存在硬盘上。

sessionId

使用Cookie的时候，服务器会先个用户一个响应头，来设置Cookie

response.setHeader('Set-Cookie', `sign_in_email=${email}`)
response.statusCode = 200

通过sessionId来改写响应头Set-Cookie设置Cookie

let seesions ={}
// 在服务器端准备一个hash来存储session
...
let sessionId = Math.random()*100000
sessions[sessionId] = {sign_in_email: email}
response.setHeader('Set-Cookie', `sessionId=${sessionId}`)
response.statusCode = 200

在用户登录时，浏览器可以查看到响应头

登陆setcookie.png

再次访问该域名下的页面时Cookie就可以利用sessionId来得到用户隐私信息

cookie.png

使用随机数来做sessionId，最终把这一串随机数暴露给用户。服务器通过Set-Cookie给用户一个sessionId ，每次用户访问访问服务器的时候，服务器通过对应的sessionId来读取sessions里的信息，就知道了用户的隐私信息了，安全是利用随机数保证的。

var sessions = {
  sessionId: {sign_in_email: email},
}

二 持久化存储

1.localStorage

localStorage是HTML5提供的API

window.localStorage 实质上是一个浏览器全局环境下的hash表

存在c盘的一个文件里，大小一般为5m，不同浏览器大小不同

如何使用

存对象时用JSON来存储，否则会被转换为字符串[Object Object]

// 1.添加键，值
localStorage.setItem('jsonString', JSON.stringify({name:'obj'}))
// 2.获得值
localStorage.getItem('jsonString')
//3.清空localStorage
localStorage.clear()

和其他变量的区别

在JavaScript脚本里的变量，会在页面关闭和刷新时就没有了，下一次打开的时候又重新生成。

localStorage里的变量持久化存储可以再以后使用。

在有localstorage前所有的变量在页面刷新的时候全部销毁，没有办法保存下来，每次都是新的

最典型的应用记录是否提示过用户

<script>
  let already = localStorage.getItem('以提醒用户')
  if(!already) { //already = null
    alert('我们是船新版本啦～')
    localStorage.setItem('以提醒用户', true)
  }else{
    
  }
</script>

2. SessionStorage

和localStorage特点基本相同；不同点为LocalStorage若不清除就一直有效，SessionStorage在用户关闭页面后（会话结束）就会失效。

三 总结

3.1 Cookie

1. 服务器通过Set-Cookie头给客服端一串字符串
2. 客户端每次访问相同域名的网页时，必须带上这短字符串
3. 客户端要在一段时间内保存Cookie
4. Cookie默认在用户关闭页面后就失效，后台代码可以设置Cookie的过期时间
5. 大小大概在4kb左右

3.2 Session

1. 将 SessionID（随机数）通过 Cookie 发给客户端
2. 客户端访问服务器时，服务器读取 SessionID
3. 通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
4. 服务器有一块内存（哈希表）保存了所有 session

3.3 localStorage

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

四 HTTP缓存

用于web性能优化，假如说我们要访问的的文件比较大，我们请求完之后，下载需要花很长时间，当我们刷新页面的时候，虽然文件没有任何更新，但是我们又从服务器端下载了一遍大文件，导致每次响应时间依然很长。我们可以利用HTTP缓存来进行性能优化。

4.1Cache-Control

如何设置缓存

通过max-age设置缓存有效时间

if (path === '/js/main.js'){
    let string = fs.readFileSync('./js/main.js', 'utf8')
    response.setHeader('Content-Type', 'application/javascript;charset=utf-8')
    response.setHeader('Cache-Control', 'max-age=30')
    response.write(string)
    response.end()
  }

以上在响应头里加上Cache-Contorl，表示浏览器在30s内刷新页面也不会发起对main.js的请求，在本地的内存硬盘里加载main.js，加快浏览器的加载速度。

Cache-Contorl让浏览器在一段时间内不访问服务器，而是从本地的内存和硬盘上拿到所需资源，连请求都没有，所以页面加载就十分快。

cache-control.png

注意

1. 在首页不能设置Cache-Control，我们刷一些论坛性质的或者新闻性质的网站，注重时效性，一般会把爆炸性的、高质量的内容放到首页去，如果我们看了一会，想刷新看看新的更新的内容，而你设了缓存，看到的还是10分钟之前的首页。
2. 缓存尽量设置可能长的时间 ，如果一个文件长期不变，把它设为从缓存里面获得，知乎设置了32596169秒的有效时间，1年的时间。

如何更新缓存

开发者在入口处URL进行改变,来重新请求更新,要升级就改变URL

需要更新设置查询参数 ?v=3 来重新加载 版本号

需要更新在入口处URL更新，就会重新去加载最新的文件版本了。

...
<script src="./js/main.js?V2"></script>
...

当你更新代码之后，理论上只需要在URL上添加查询参数？V2即可。

4.2Expires以前使用

如果有了cache-control，Expires会被忽略

Expires 响应头包含日期/时间， 即在此时候之后，响应过期。

无效的日期，比如 0, 代表着过去的日期，即该资源已经过期。

如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。

response.serHeader('Expiers', 'GM时间')什么时间缓存过期重新请求。

使用Expires要将时间转化为格林威治时间

var d = new Date() //Sat Feb 10 2018 11:18:54 GMT+0800 (CST)
d.toGMTString() //"Sat, 10 Feb 2018 03:18:54 GMT"

if (path === '/js/main.js'){
    let string = fs.readFileSync('./js/main.js', 'utf8')
    response.setHeader('Content-Type', 'application/javascript;charset=utf-8')
    response.setHeader('Expires', 'Sat, 10 Feb 2018 03:18:54 GMT')
    response.write(string)
    response.end()
  }

Expires是基于用户电脑的本地时间，若用户本地时间有错，所有缓存就会有错。所以优先使用Cache-Control

4.3ETag

The ETag HTTP response header is an identifier for a specific version of a resource. It lets caches be more efficient and save bandwidth, as a web server does not need to resend a full response if the content has not changed. Additionally, etags help prevent simultaneous updates of a resource from overwriting each other ("mid-air collisions").

If the resource at a given URL changes, a new Etag value must be generated. A comparison of them can determine whether two representations of a resource are the same. Etags are therefore similar to fingerprints, and might also be used for tracking purposes by some servers. They might also be set to persist indefinitely by a tracking server.

• ETag HTTP响应头是对特定资源版本的识别
• 如果这个资源的URL改变了，一定会生成一个新的ETag值，一个检验会决定它们是否是同一资源。因此Etag有一点像资源的指纹。

md5一个摘要算法,用于检验文件是否相同,给文件一个版本号。

MD5引入

//terminal
npm install md5
...
//在server.js引入
var md5 = require('md5');
...
// terminal
MD5 (mian.js) = 2bb84jdhfrh294r492348frwa9322

如何设置ETag缓存未更改的资源

if (path === '/js/main.js'){
    let string = fs.readFileSync('./js/main.js', 'utf8')
    response.setHeader('Content-Type', 'application/javascript;charset=utf-8')
    let flieMd5 = md5(string)
    response.setHeader('ETag', flieMd5)
    //response.setHeader('Expires', 'Sat, 10 Feb 2018 03:18:54 GMT')
    response.write(string)
    response.end()
  }

浏览器响应头如下

ETag响应头.png

再次刷新可以看到客服端发送的请求里会出现一个新的请求头If-None-Macth

ETag再次请求.png

服务器将客服端的ETag(If-None-Macth的值)与其当前版本的ETag进行比较，如果两个值匹配，服务返回不带响应第四部分的响应，也就是没有响应体。就是未修改的304 Not Modified状态

可以得知具体的实现如下

if (path === '/js/main.js'){
    let string = fs.readFileSync('./js/main.js', 'utf8')
    response.setHeader('Content-Type', 'application/javascript;charset=utf-8')
    let flieMd5 = md5(string)
    response.setHeader('ETag', flieMd5)
    if(request.headers['if-none-match'] !== flieMd5) {
      //有响应体，加载改变的资源
      response.write(string)
    }else{
      //没有响应体
      response.statusCode = 304
    }
    response.end()
  }

304 Not Modified

HTTP 304 说明无需再次传输请求的内容，也就是说可以使用缓存的内容。这通常是在一些安全的方法（safe），例如GET 或HEAD 或在请求中附带了头部信息： If-None-Match或If-Modified-Since。

304表示依然会有请求与响应，但是不会有响应的第四部分响应体。而是直接从本地的内存硬盘中获得。

五 常见题目

1.Cookie 和 Session 的区别

1. Cookie 保存在客户端，每次都随请求发送给 Server

2. Session 保存在 Server 的内存里，其 Session ID 是通过 Cookie 发送给客户端的

2.Cookie 和 LocalStorage 的区别

1. window.LocalStorage实质上全局对象里的一个hash表，由HTML5提供的一个API，用于持久化存储；Cookie的大小一般在4k左右，LocalStorage的大小一般在5m左右不同浏览器大小不同
2. Cookie属于HTTP内容，HTTP不会带上LocalStorage

3.LocalStorage 和 SessionStorage 的区别

LocalStorage若不清除就一直有效，SessionStorage在用户关闭页面后（会话结束）就会失效

4.Cookie 如何设置过期时间？如何删除 Cookie？

1. 持久性Cookie：和关闭浏览器变失效的会话期Cookie不同，持久性Cookie可以指定一个特定时间（Expires）或有效期（Max-Age）
   Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

2. 设置cookie过期时间小于当前时间，那么就会删除该cookie
   Set-Cookie: reg_fb_gate=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT

   function deleteCookie(name) {
     document.cookie = name + '=;  expires=Thu, 01 Jan 1970 00:00:01 GMT;'
   }
   

   在浏览器中删除存储的Cookie

5. Cache-Control: max-age=1000 缓存 与 ETag 的「缓存」有什么区别？

1. Cache-Control: max-age =1000 是在这1000s内缓存有效，通过相同URL请求服务器时，浏览器在1000s不会发送HTTP请求访问服务器，而是从本地的内存和硬盘上拿到请求的资源。
2. ETag：是通过校验两次请求资源的md5值是否改变来判断是否需要重新加载资源，是一定会发起HTTP请求且有响应，如果md5值相同，有请求有响应状态码304，但不会有响应的第四部分响应体；如果md5值不同，就会重新加载新的响应体。