咱们来聊聊Cookie、Session和Storage的那些事

时间 2019-12-10

标签咱们聊聊 cookie session storage 那些栏目 HTML 繁體版

原文原文链接

导语

咱们在作项目的时候，常常把Cookie和Session挂在嘴边，可实际对于他们了解的也是不多，只是会使用，但这远远不够，熟练的掌握他们的特性才能把项目作的更好。下面咱们就来认识一下他们吧！php

### 先来了解一下Cachehtml

Cache表示数据缓存，合理的设置cache，它能够帮助咱们提升访问速度，减小请求（在缓存有效期内直接读取Cache文件），减小文件从服务器直接拉取文件(缓存过时后，请求服务器器检查文件是否被更改，如没有被更改则返回304而后读取Cache)；nginx

Cache的数据通常是服务器上不常常变更的数据，如图片、某些数据js、html、php等;若是是常常变更的数据通常是不被缓存的，没有意义；若是把一个常常变更的文件缓存起来的话，没有多大意义。segmentfault

读取Cache的过程浏览器

首先检查文件设置的缓存是否过时：缓存

若是过时了，则会从新发送请求到服务器，检查该文件是否有被更新，若是没有被更新，则服务器会返回304 Not Modified,表示服务器上该文件没有被更新,用户发起的对该文件请求则会直接从本地cache读取；若是服务上文件被更新了，则服务器会返回新的文件，此时http返回码为200 ok,更新缓存。
若是没有过时，则会直接读取本地cache文件，再也不发起http请求;

在浏览器的控制台的Network，咱们能够看到一些文件的Headers，咱们来讲说其中的一些头部设置的做用：安全

Responese Headers服务器

access-control-allow-origin:*
cache-control:max-age=691200
content-length:0
date:Sun, 22 Apr 2018 03:25:41 GMT
etag:"5ad8603c-214cb"
expires:Fri, 27 Apr 2018 13:33:04 GMT
server:marco/2.0
status:304
via:T.3.H, M.ctn-fj-foc-007
x-request-id:30e1ceac71122f15ed9144c272406682

Request Headerscookie

:authority:static.segmentfault.com
:method:GET
:path:/v-5ad86038/3rd/assets.js
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, sdch, br
accept-language:zh-CN,zh;q=0.8
cache-control:max-age=0
if-modified-since:Thu, 19 Apr 2018 09:24:12 GMT
if-none-match:W/"5ad8603c-214cb"
origin:https://segmentfault.com
referer:https://segmentfault.com/user/settings?tab=notify
user-agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.5006.400 QQBrowser/9.7.13080.400

expires
expires是HTTP/1.0控制网页缓存的字段，表示服务器返回该请求结果缓存的到期时间，即再次发起该请求时，若是客户端的时间小于Expires的值时，直接使用缓存结果；expires=当前服务器date+缓存有效时间；时间格式为GTM，是一个绝对值。网络
cache-control

用户控制http的缓存，max-age表示客户端能够接收生存期不大于指定时间（以秒为单位）的响应；max-age=0;表示每次请求该文件时，都须要请求服务器检查文件在上一次被缓存时有无修改过；max-age=10;表示10s内再次对该文件发起请求则不须要向服务器发起请求读取文件，直接读取本地cache文件；

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：
- public：全部内容都将被缓存（客户端和代理服务器均可缓存）
- private：全部内容只有客户端能够缓存，Cache-Control的默认取值
- no-cache：客户端缓存内容，可是是否使用缓存则须要通过协商缓存来验证决定
- no-store：全部内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
- max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效，是一个相对值

因为**Cache-Control的优先级比expires**，那么直接根据Cache-Control的值进行缓存，意思就是说在600秒内再次发起该请求，则会直接使用缓存结果，强制缓存生效。

***注：在没法肯定客户端的时间是否与服务端的时间同步的状况下，Cache-Control相比于expires是更好的选择，因此同时存在时，只有Cache-Control生效。***

以上只是简单的了解一下Cache，更深刻的了解浏览器的缓存机制，能够看看这篇文章-->完全理解浏览器的缓存机制,讲得深刻，看完会对你有很大的帮助。

Cookie

Cookie是客户端存储数据的一个一种选项。

当咱们向服务器发送任意的HTTP请求的时候，服务器会返回一个带有Set-Cookie的HTTP响应头返回给浏览器，其中包含一些会话信息。这种响应头可能以下：

// Response Headers 响应头

HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Sun, 22 Apr 2018 06:16:14 GMT
Content-Type: text/html
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Set-Cookie: SID=t65ln3kllu7ujutldk4hcota05; path=/
Content-Encoding: gzip

这个响应头设置SID为名称，t65ln3kllu7ujutldk4hcota05为值的一个Cookie。

若是用户不是第一次访问，即：本地已经存在cookie，则在发送请求时会将cookie一并发给服务器，服务器收到请求以后会做出相应处理，返回对应的信息；这种请求头可能以下：

// request Headers 请求头

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Cookie: SID=t65ln3kllu7ujutldk4hcota05

Cookie的设置

设置方式为：

document.cookie="name=value;domain=域名;path=/;expires=过时时间;secure"

其中name和value是必须，其余为可选；name和value都须要通过URL编码--encodeURIComponent()

如今介绍一下Cookie的构成：

name :一个惟一肯定Cookie的名称，不区分大小写，获取Cookie是根据name来查找
value：存储在Cookie中的字符串值
domain：Cookie对于哪一个域有效，好比domain="aa.qq.com"，那么qq.com就不能够读取该Cookie，若是没有设置，会默认该请求来自当前域。
path：对于指定域中的哪一个路径。好比path="/book/",那么对于www.aa.qq.com/cc/的请求就不能发送Cookie
expires:Cookie过时时间，这个值是GMT格式的日期
secure：设置这个标志后，Cookie只有在SSL连接的时候才会发送给服务器，好比https://www.aa.qq.com能够，而http://www.aa.qq.com就不行

Cookie的缺点

Cookie在每一个浏览器以及版本的数量都不一样
- IE6一下版本每一个域名最多20个
- IE7以上的版本每一个域名最多50个
- FireFox每一个域名最多50个
- Opera每一个域名最多30个
- Safari和Chrome没有硬性规定，应该是有一个极限的
大小受限，通常是在4k左右，最好别超过4k
用户能够操做禁用cookie，使功能受限
安全性较低
有些状态不可能保存在客户端
每次访问都要传送cookie给服务器，浪费带宽。
cookie数据有路径（path）的概念，能够限制cookie只属于某个路径下。

浏览器提供设置Cookie方法比较简陋，操做会比较麻烦，咱们能够本身动手封装一个

class CookieUtil{
    constructor(){

    }

    get(name){
        var cookies=document.cookie.split(";");
        var curCookie;
        for(var i=0;i<cookies.length;i++){
            curCookie=cookies[i].split("=");
            if(decodeURIComponent(curCookie[0])===name){
                return decodeURIComponent(curCookie[1])
            }

        }
        return null;
    }
    set(name,value,expires,domain,path,secure){
        if(!name&&!value){
            return
        }
        var cookieStr=encodeURIComponent(name)+"="+encodeURIComponent(value);
        if(expires && (expires instanceof Date)){
            cookieStr+=";expires="+expires.toGMTString();
        }

        if(path){
            cookieStr+=";path="+path
        }
        if(domain){
            cookieStr+=";domain="+domain
        }
        if(secure){
            cookieStr+=";secure"
        }
        document.cookie=cookieStr;
    }

    delete(name,domain,path,secure){
        this.set(name,"",new Date(0),domain,path,secure)
    }
}

Session

Session是保存在服务端的，经过相似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

Session机制

当服务器收到请求须要建立session对象时，首先会检查客户端请求中是否包含sessionid。若是有sessionid，服务器将根据该id返回对应session对象。若是客户端请求中没有sessionid，服务器会建立新的session对象，并把sessionid在本次响应中返回给客户端。一般使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。若是用户禁用cookie，则要使用URL重写，能够经过response.encodeURL(url)进行实现；API对encodeURL的约束为：当浏览器支持Cookie时，url不作任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

Session的优势

大小没有限制
session的安全性大于cookie，缘由以下：
- sessionID存储在cookie中，若要攻破session首先要攻破cookie
- sessionID是要有人登陆，或者启动session_start(php中的方法)才会有，因此攻破cookie也不必定能获得sessionID
- 第二次启动session_start后，前一次的sessionID就是失效了，session过时后，sessionID也随之失效。
- sessionID是加密的

Session的缺点

Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
依赖于cookie（sessionID保存在cookie），若是禁用cookie，则要使用URL重写，不安全
建立Session变量有很大的随意性，可随时调用，不须要开发者作精确地处理，因此，过分使用session变量将会致使代码不可读并且很差维护。

Storage

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

Webstorage的两个主要目标：

提供一种在cookie以外存储会话数据的路径。
提供一种存储大量能够跨会话存在的数据的机制。

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

生命周期
- localStorage:localStorage的生命周期是永久的，关闭页面或浏览器以后localStorage中的数据也不会消失。localStorage除非主动删除数据，不然数据永远不会消失。
- sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即便刷新页面或者进入同源另外一个页面，数据依然存在。可是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不同的。
存储大小：
- localStorage和sessionStorage的存储数据大小通常都是：5MB
存储位置：
- localStorage和sessionStorage都保存在客户端，不与服务器进行交互通讯。
存储内容类型：
- localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可使用ECMAScript提供的JSON对象的stringify和parse来处理
获取方式：
- localStorage：window.localStorage;；
- sessionStorage：window.sessionStorage;。
应用场景：
- localStoragese：经常使用于长期登陆（+判断用户是否已登陆），适合长期保存在本地的数据。
- sessionStorage：敏感帐号一次性登陆；

WebStorage的优势：

存储空间更大：
- cookie为4KB，而WebStorage是5MB；
节省网络流量：
- WebStorage不会传送到服务器，存储在本地的数据能够直接获取，也不会像cookie同样美词请求都会传送到服务器，因此减小了客户端和服务器端的交互，节省了网络流量；
对于那种只须要在用户浏览一组页面期间保存而关闭浏览器后就能够丢弃的数据，sessionStorage会很是方便；
快速显示：
- 有的数据存储在WebStorage上，再加上浏览器自己的缓存。获取数据时能够从本地获取会比从服务器端获取快得多，因此速度更快；
安全性：
- WebStorage不会随着HTTP Header发送到服务器端，因此安全性相对于cookie来讲比较高一些，不会担忧截获，可是仍然存在伪造问题；
WebStorage提供了一些方法，数据操做比cookie方便；
- setItem (key, value) —— 保存数据，以键值对的方式储存信息。
- getItem (key) —— 获取数据，将键值传入，便可获取到对应的value值。
- removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
- clear () —— 删除全部的数据
- key (index) —— 获取某个索引的key