HTTP系列 -- Session + Storage + Cache-Control + ETag + Cookie

概述

本文主要讲述 Session + Storage + Cache-Control + ETag + Cookie 这五者的作用及区别

Session

首先通过代码认识一下 Session。之前我们说 Cookie 可以存储我们的一些信息，但是由于用户在浏览器中可以对 Cookie 进行操作，显然这不是我们想要的，所以 Session 应运而生，Session 解决了 Cookie 不安全的痛点

code

我们在内存中开辟一个空间，用来存储 Session

let sessions = {}

当用户登录成功时

let sessionId = Math.random() * 1000000
sessions[ sessionId ] = { key: value }  // 表示存储的用户信息
response.setHeader( 'Set-Cookie', `sessionId = ${ sessionId }` )  // Cookie: 'sessionId = 随机数'

当此用户访问首页时，遍历 Cookie，将所有 Cookie 存储到一个 hash（哈希表）中，之后

let mySession = sessions[ hash.sessionId ]
let username
if( mySession ){
    username = mySession.用户信息  // 用户信息表示 sessions 中的{ key: value }
}

Session 特点

1. 服务器通过 Cookie（sessionId = ${ sessionId }） 将 SessionId（随机数）发给浏览器
2. 服务器有一块内存保存了所有的 Session（哈希表）
3. 当浏览器访问服务器时，服务器读取 SessionId
4. 服务器通过 SessionId 可以得到对应用户的隐私信息
5. 用户每次登录都会设置一个 SessionId，并且 SessionId 不保存在服务器中

Storage

作为 Web Storage API 的接口（HTML5），Storage 提供了访问特定域名下的会话存储（session storage）和本地存储（local storage）的功能，例如：增删改查存储的数据项。Storage 与 HTTP 无关，它是浏览器上的哈希表，Storage 文件存储在本地的一个文件夹中

• window.sessionStorage ==> 操作一个域名的会话存储（session storage）
• window.localStorage ==> 操作一个域名的本地存储（local storage）

API

• Storage.setItem() ==> 接收一个键名和值作为参数，把键值对添加到存储中，如果键名存在，则更新其对应的值

• Storage.getItem() ==> 接收一个键名作为参数，返回键名对应的值

• Storage.removeItem() ==> 接收一个键名作为参数，并把该键名从存储中删除

• Storage.clear() ==> 清空存储中的所有键名

对象的存储

localStorage.setItem( 'object', { name: 'obj' } )  // object  [ object Object ]

存储对象

浏览器会将 { name: 'obj' } 转化为字符串即 ({ name: 'obj' }).toString，所以当我们存储对象时，使用 JSON ，即

localStorage.setItem( 'object', JSON.stringify({ name: 'obj' }))

localStorage

使用场景

记录是否提示过用户 + 记录一些不敏感的信息，常见新手引导界面

let already = localStorage.getItem( 'isGuide' )
if( !already ){
    // 开启引导
    localStorage.setItem( 'isGuide', true )
}

特点

1. localStorage 与 HTTP 无关，所以 HTTP 不会带上 localStorage 的值
2. 每个域名的 localStorage 有最大存储量，因浏览器而异
3. 只有相同域名的页面才能互相读取 localStorage
4. localStorage 永久有效，除非用户清除

sessionStorage

特点

1. sessionStorage 与 HTTP 无关，所以 HTTP 不会带上 sessionStorage 的值
2. 每个域名的 sessionStorage 有最大存储量，因浏览器而异
3. SessionStorage 只在同一浏览器窗口中共享
4. sessionStorage 在用户关闭页面后就会失效

Cache-Control

Cache-Control 通用消息头被用于在 HTTP 请求和响应中通过指定指令来实现缓存机制。当我们请求的文件（css、js）很大时，可以使用 Cache-Control 实现缓存，从而达到性能优化的目的
前提：使用相同的 URL 才能实现 Cache-Control 缓存机制

HTML