webStorage(localStorage和sessionStorage) ，Cookie和Session

参考文献：

1. https://juejin.im/post/5cd9037ee51d456e5c5babca
2. https://juejin.im/post/5aede266f265da0ba266e0ef
3. https://juejin.im/entry/5ac4d661f265da23a049c92a

 

localStorage和sessionStorage的异同

 

         sessionStorage用于本地存储会话（session）中的数据，这些数据只能在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。

        localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

 

• 相同点

1. 存储大小一般是5M
2. 都有同源策略限制， 跨域无法访问
3. 数据 仅在客户端（浏览器）存储，不参与和服务器的通信
4. 以 键值对（key-value）的形式进行存储数据，value值必须为字符串，若是对象需要转json

• 不同点
• 生命周期：

1. localStorage 理论上是永久的，除非用户手动删除
2. sessionStorage 在当前会话结束时被清除

• 作用域

1. localStorage 同浏览器限制，同源限制
2. sessionStorage 同浏览器限制，同源限制，同标签页限制

 

• 两者操作相同

    以sessionStorage为例：

 

• 新增/修改

           sessionStorage.setItem(key，value)

1. sessionStorage.setItem(’name’，’qianyin’)
2. sessionStorage.setItem(‘user1’，JSON.stringify{name：'qianyin'})
3. sessionStorage.user2 = JSON.stringify{name：'qianyin'}

 

• 获取数据

            sessionStorage.getItem（key）

           sessionStorage.key

            sessionStorage.valueOf（）//获取全部数据

1.  sessionStorage.getItem（’name'）
2.  sessionStorage.user1

• 移除数据

           sessionStorage.removeItem（key）

           delete sessionStorage.key

           sessionStorage.clear（）//清除当前作用域下所有数据

1. sessionStorage.removeItem（'name'）
2. delete sessionStorage.user1                            

Cookie

         HTTP Cookie（也叫 Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

        Cookie的作用是跟服务器进行交互，作为HTTP规范的一部分而存在，而web storage仅仅是在本地存储数据。

 

• 应用：

1. 会话状态管理（用户登录状态，游戏分数或者其他需要记录的数据）
2. 个性化设置（用户自定义主题等设置）
3. 浏览器行为追踪（跟踪分析用户行为等）

• 特点：

1. cookie大小限制是4KB。
2. 主要用途是保存登录信息和标记用户（比如购物车）等，不过随着localStorage的出现，现在购物车的工作cookie承担的较少了。
3. 一般由服务器生成在客户端保存状态，可以设置失效时间。如果在浏览器生成，默认是关闭浏览器后失效。
4. 每次都携带在HTTP请求头中，如果使用cookie保存过多数据会带来性能问题。
5. 原生API不如storage友好，需要自己封装函数。
6. 不可跨域，每个cookie只会绑定单一的域名。

• cookie的数量&大小限制以及处理策略

浏览器	IE6.0	IE7.0/8.0	Opera	Firefox	Safari	Chorme
cookie最大个数	20	50	30	50	无限制	53

• 超出限制后的处理策略

1. 最近最少方法（LRU）方法： IE和Opera使用该方法。在达到cookie限制时自动剔除最老的cookie，以腾出空间给最新的cookie。类似于队列。
2. Firefox会随机删除cookie。
3. 超过大小长度的话直接截取丢弃。

• 属性：

     1. name： 名字。一个域名下绑定的cookie，name不能相同而且一旦创建无法修改，相同的name的值会被覆盖掉。

     2.value： 值。cookie中规定，分号，逗号和空格可以利用URL编码，但是并不是必须，为了不给用户带来不必要的麻烦和考虑到服务器的兼容性，任何存储的cookie数据都应该被编码。

     3.domain： 绑定的域名。如果没有设置就会默认绑定到执行语句的当前域。同一个域名下的二级域名也是不可以交换使用cookie的，比如www.baidu.com和image.baidu.com依旧不能共用。

     4.path： 使用路径。默认是“/” 。                                                                                                                                                                path=/ 说明本域名下contextPath都可以访问该cookie； 

        path=/app/ 则只有contextPath为’/app’的程序可以访问该cookie。

     5.Expires/Max-age： 生命周期 。

         Expires代表的是过期具体时间 

        Max-age是最大有效时间（单位是s）：

        正数：超过maxAge秒之后失效；

        负数：该cookie为临时cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该cookie；

        0：表示删除该cookie。                                                     

     6.secure： 是否被使用安全协议传输。这里的安全协议包括HTTPS，SSL等，默认为false。

     7.HttpOnly： 限制非HTTP协议程序接口对客户端Cookie进行访问。 如果这个属性设置为true，就不能通过js脚本来获取cookie的值，能有效的防止xss攻击。

     8.version ： 版本号 。

       0：表示遵循Netscape的cookie规范，目前大多数用的都是这种规范；

       1：表示遵循W3C的RFC2109的cookie规范，规范过于严格，实施起来很难

     9.comment ： 用处说明 。浏览器显示cookie信息的时候显示该说明。

 

 

Session

 

         Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当客户端关闭会话，或者 Session 超时失效时会话结束。

 

        当客户端请求创建一个session时，服务器会先检查这个客户端的请求里是否已经包含了一个session标识-sessionId。

• 如果已经包含：服务器就按照sessionId把这个session检索出来使用。（如果检索不到也会新建一个）
• 如果不包含：则为此客户端创建一个session并且生成一个与此session相关联的sessionId。

 

        浏览器关闭后这次的session就消失了，下次打开就不再拥有这个session，其实并不是session消失了，只是sessionID变了，服务器端可能还是存着你上次的sessionID以及session信息，只是它们是无主状态，也许过一段时间就会被删除。

        sessionId的值一般是一个既不会重复又不容易被仿造的字符串，这个sessionId将被在本次响应中返回给客户端保存。保存sessionId的方式大多数情况下用的是cookie。如果浏览器禁用了cookie，sessionID也会失效，但是可以通过其他方式传递，一种是每次请求都携带sessionID参数，用POST方式提交；还有一种是Token机制，Token机制多用于APP客户端和服务器交互的模式，也可以用于web端做用户状态管理。是通过服务器端生成的一串字符串，作为客户端进行请求的一个标识。

 

 

• 分布式 Session 问题

        互联网公司为了更多流量，后端会需要更多的服务器。如果在服务器A登录了，再去服务器B就会出现登录失效的问题。

        解决方案：

1. Session共享（推荐）： 将用户的session 信息使用缓存中间件来统一管理，保障分发到每一个服务器的响应结果都一致。
2. Session 复制： 将session复制，每次有session的增删改减，该节点会把这个session的所有内容序列化然后广播给所有的节点。
3. Nginx ip_hash策略： 服务端使用 Nginx 代理，每个请求按访问 IP 的 hash 分配，这样来自同一 IP 固定访问一个后台服务器，避免了在服务器 A 创建 Session，第二次分发到服务器 B 的现象。

• 特点

1. 访问较多时，session会较大的占用服务器的性能，所以应该适当使用cookie
2. 安全性相对高。重要交互信息比如权限等放在session中。

 

Session和Cookie的联系和比较

 

 

        

 

        上图流程：

 

        浏览器第一次请求服务器，服务器端返回response，并且将sessionId以set-cookie的方式种在客户端，这样一来，sessionId就存在了客户端。这里要注意的是，将sessionId存在cookie并不是一种强制的方案，而是大家一般都这么做，而且发请求的时候符合domain和path的时候，会自动带上cookie，省去了手动塞的过程。

        第二次请求，会自动判断该域名下有没有cookie信息，如果存在会自动将cookie信息发送给服务器端，服务器端通过接收的cookie得到sessionID，再根据sessionID去寻找session信息。如果没有找到则说明用户没有登录或者超时失效。如果找到证明用户已经登录可以进行余下操作。

        综上，sessionID是连接session和cookie的一道桥梁。大部分网站都是根据次原理来验证用户的登录状态。

 

 

• Session和Cookie的区别

1. 作用范围不同。cookie存储在客户端（浏览器），session保存在服务器端。
2. 存取方式不同。cookie只能保存ASCII，session可以存储任意数据类型，一般情况下我们可以在session中保持一些常用变量信息，比如UserId等。
3. 有效期不同。cookie可以设置长时间保持，比如默认登录功能；session失效时间很短，在客户端关闭或者session超时就会失效。
4. 安全性不同。cookie存储在客户端容易遭到不法窃取；session存储在服务器端，安全性相对来说高一些。
5. 存储大小不同。cookie一般是4KB，session的可存储数据远远高于cookie。（有一种说法是：session中的数据存储在web服务器上的内存中，受内存大小限制。如果内存中数据过多会影响性能。）