分享人：于靖华
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
当我们在网页中向服务器请求信息时，一般发送http请求， 但是HTTP协议是无状态协议，无状态是指协议对于事务处理没有记忆能力， 一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。 这就意味着服务器无法从连接上跟踪会话。那当我们在一个网站登录之后， 在网站其他页面怎么判断是否已经登录？ 要跟踪该会话，必须引入一种机制。
cookie
Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右， 是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息， 比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
cookie指的是储存在用户本地终端上的数据，它是由Web服务器创建的， 当客户端第一次请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。 客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。 服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
Cookie在生成时就会被指定一个Expire值，这就是Cookie的生存周期，在这个周期内Cookie有效， 超出周期Cookie就会被清除。有些页面将Cookie的生存周期设置为“0”或负值，这样在关闭浏览器时, 就马上清除Cookie，不会记录用户信息，更加安全。
用户也可以在浏览器端进行设置，禁止服务器向客户端浏览器颁发一个Cookie。
我们可以在脚本中读取，创建和存储 cookie; 例如下面的代码会输出本页面所有的Cookie。 document.write(document.cookie)
Session
Session是服务器端技术，利用这个技术，服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象， 由于session为用户浏览器独享，所以用户在访问服务器的web资源时， 可以把各自的数据放在各自的session中，当用户再去访问服务器中的其它web资源时， 其它web资源再从用户各自的session中取出数据为用户服务。
Session的使用比Cookie方便，但是过多的Session存储在服务器内存中，会对服务器造成压力。 虽然Session保存在服务器，对客户端是透明的，它的正常运行仍然需要客户端浏览器的支持。 这是因为Session需要使用Cookie作为识别标志。 HTTP协议是无状态的，Session不能依据HTTP连接来判断是否为同一客户， 因此服务器向客户端浏览器发送一个名为JSESSIONID的Cookie， 它的值为该Session的id（也就是HttpSession.getId()的返回值）。 Session依据该Cookie来识别是否为同一用户。
Web Storage
WebStorage是HTML5中本地存储的解决方案之一
Web Storage实际上由两部分组成:sessionStorage与localStorage。
localStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代， 就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。 而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+， 那以 userData 作为你的 polyfill 的方案是种不错的选择。
sessionStorage
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。 做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念， 它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
| 特 性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命期 | 可设置失效时间，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。
所以，在其它页面保持登录，可以在登录后往本地storage中存储一个关键字段（存储用户信息）,如 :login：true
在路由变化的时候，或者在页面跳转的时候，检测是该字段值是否正确，不正确则跳转登录页；
点击注销可以执行删除
Cookies包含了一些敏感信息：用户名，计算机名，使用的浏览器和曾经访问的网站, 在某种程度上说已经严重危及用户的隐私和安全。
下面方法能增加安全性：
1.设置该 Cookie 不能被脚本读取；
2.对 Cookie 内容进行加密，在加密前嵌入时间戳，保证每次加密后的密文都不一样（并且可以防止消息重放）；
3.客户端请求时，每次或定时更新 Cookie 内容；
4.每次向 Cookie 写入时间戳，数据库需要记录最后一次时间戳；
5.客户端提交 Cookie 时，先解密然后校验时间戳，时间戳若小于数据数据库中记录，即意味发生攻击。
1.从容量上讲WebStorage一般浏览器提供5M的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣
2.安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全。
3.从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省。
参考一：HTML5 WebStorage
参考二：360百科
参考二：Nancy的专栏
使用的是Session.，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的 ，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。 这个Session是保存在服务端的，有一个唯一标识。在服务端保存Session的方法很多， 内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，一般会有专门的Session服务器集群， 用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务比如Memcached之类的来放 Session
会使用一种叫做URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户
感谢大家观看
BY:胡嘉杰|张增锋