详解Web缓存三——cookie和session以及webstorage

一：cookie与session

1.先来了解几个概念。

1、无状态的HTTP协议：
协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。
HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。
2、会话（Session）跟踪：
会话，指用户登录网站后的一系列动作，比如浏览商品添加到购物车并购买。会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。
Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。
比如：你浏览某个网页的时候，WEB 服务器会先送一些资料放在你的计算机上，类似于你打的文字，选的一些东西什么的，Cookie 会帮你纪录在计算机里，而session会将这些信息记录在WEB服务器。
当下次你再光临同一个网站，WEB服务器会先对比它上次留下的 Cookie 资料和session，有的话，就会依据 Cookie里的内容来判断使用者，送出特定的网页内容给你。 Cookie 的使用很普遍，许多有提供个人化服务的网站，都是利用 Cookie来辨认使用者，以方便送出使用者量身定做的内容。

2.Cookie

Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。
当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

cookie的内容主要包括：
名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。
1）Name 和 Value 属性由程序设定,默认值都是空引用。
2）Domain属性的默认值为当前URL的域名部分，不管发出这个cookie的页面在哪个目录下的。
3）Path属性的默认值是根目录，即 ”/” ，不管发出这个cookie的页面在哪个目录下的。可以由程序设置为一定的路径来进一步限制此cookie的作用范围。
4）Expires 属性，这个属性设置此Cookie 的过期日期和时间。
domain和path总结：
domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。
所以domain和path2个选项共同决定了cookie何时被浏览器自动添加到请求头部中发送出去。如果没有设置这两个选项，则会使用默认值。
domain的默认值为设置该cookie的网页所在的域名，path默认值为设置该cookie的网页所在的目录。

cookie如何工作？
当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。
这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。
存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销。
cookie特征：
1.不同的浏览器存放的cookie位置不一样，也是不能通用的。
2.cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。（不可跨域使用）
3.我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
6.cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁，但是是可以修改过期时间的。
设置cookie：
客户端设置

document.cookie = '名字=值';document.cookie = 'username=cfangxu;domain=baike.baidu.com'    并且设置了生效域

注意： 客户端可以设置cookie 的下列选项：expires、domain、path、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功），但无法设置HttpOnly选项。
服务器端设置
不管你是请求一个资源文件（如 html/js/css/图片），还是发送一个ajax请求，服务端都会返回response。而response header中有一项叫set-cookie，是服务端专门用来设置cookie的。

Set-Cookie 消息头是一个字符串，其格式如下（中括号中的部分是可选的）：
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

注意： 一个set-Cookie字段只能设置一个cookie，当你要想设置多个 cookie，需要添加同样多的set-Cookie字段。
服务端可以设置cookie 的所有选项：expires、domain、path、secure、HttpOnly 通过 Set-Cookie 指定的这些可选项只会在浏览器端使用，而不会被发送至服务器端。

3.Session

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。
客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。
每个用户访问服务器都会建立一个session，那服务器是怎么标识用户的唯一身份呢？
事实上，用户与服务器建立连接的同时，服务器会自动为其分配一个SessionId。
问题：
什么东西可以让你每次请求都把SessionId自动带到服务器呢？
显然就是cookie了，如果你想为用户建立一次会话，可以在用户授权成功时给他一个唯一的cookie。当一个用户提交了表单时，浏览器会将用户的SessionId自动附加在HTTP头信息中，（这是浏览器的自动功能，用户不会察觉到），当服务器处理完这个表单后，将结果返回给SessionId所对应的用户。试想，如果没有 SessionId，当有两个用户同时进行注册时，服务器怎样才能知道到底是哪个用户提交了哪个表单呢。服务器通过SessionId作为key，读写到对应的value，这就达到了保持会话信息的目的。
session的创建：
当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了sessionId，如果已包含则说明以前已经为此客户端创建过session，服务器就按照sessionId把这个session检索出来使用（检索不到，会新建一个）。
如果客户端请求不包含sessionId，则为此客户端创建一个session并且生成一个与此session相关联的sessionId，sessionId的值是一个既不会重复，又不容易被找到规律以仿造的字符串，这个sessionId将被在本次响应中返回给客户端保存。

4.cookie 和session的区别

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
因此个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
补充内容：Token
token的意思是“令牌”，是用户身份的验证方式，最简单的token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名，由token的前几位+盐以哈希算法压缩成一定长的十六进制字符串，可以防止恶意第三方拼接token请求服务器)。还可以把不变的参数也放进token，避免多次查库
token 和session 的区别
session 和 oauth token并不矛盾，作为身份认证 token安全性比session好，因为每个请求都有签名还能防止监听以及重放攻击，而session就必须靠链路层来保障通讯安全了。如上所说，如果你需要实现有状态的会话，仍然可以增加session来在服务器端保存一些状态
Session 是一种HTTP存储机制，目的是为无状态的HTTP提供的持久机制。所谓Session 认证只是简单的把User 信息存储到Session 里，因为SID 的不可预测性，暂且认为是安全的。这是一种认证手段。 而Token ，如果指的是OAuth Token 或类似的机制的话，提供的是 认证 和 授权 ，认证是针对用户，授权是针对App 。其目的是让 某App有权利访问 某用户 的信息。这里的 Token是唯一的。不可以转移到其它 App上，也不可以转到其它 用户 上。

二：webStorage：localStorage和sessionStorage

localStorage（本地存储）

HTML5新方法，不过IE8及以上浏览器都兼容。
特点：
1.生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2.存储的信息在同一域中是共享的。
3.大小：据说是5M（跟浏览器厂商有关系）
4.在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
5.localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
6.localStorage受同源策略的限制

设置

localStorage.setItem('username','cfangxu');

获取

localStorage.getItem('username') 

也可以获取键名

localStorage.key(0) #获取第一个键名

删除

localStorage.removeItem('username') 

也可以一次性清除所有存储

localStorage.clear()

sessionStorage

其实跟localStorage差不多，也是本地存储，会话本地存储
特点：
用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。

关闭窗口后，sessionStorage即被销毁，即使在新窗口打开同源的另一个页面，sessionStorage也是没有的。
cookie、localStorage、sessionStorage区别
相同：在本地（浏览器端）存储数据
不同：cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。

localStorage和sessionStorage
相同：大小，设置方法等，存储位置，享受同源策略
不同：
1.localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

2.localStorage是永久存储，除非手动删除。
sessionStorage当会话结束（当前页面关闭的时候，自动销毁）