localStorage、sessionStorage、cookie、session区别

cookie 与 session

cookie 与 session 都是用来跟踪浏览器用户身份的会话方式。

区别：

1. 保存状态：cookie 保存在浏览器端，session 保存在服务器端
2. 使用方式：
   1. cookie 机制：如果不设置过期时间，cookie 被保存在内存中，生命周期随浏览器的关闭而结束，这种 cookie 简称为会话 cookie。如果设置了 cookie 的过期时间，cookie 会被保存在硬盘中，关闭浏览器后，cookie 数据依然存在，直到过期时间结束才消失。cookie 以文本的方式保存在客户端，每次请求都会带上它。
   2. session 机制：当服务器收到请求需要创建 session 对象时，首先会检查客户端请求中是否包含sessionid。如果有 sessionid，服务器将根据该id返回对应 session 对象。如果客户端请求中没有sessionid，服务器会创建新的 session 对象，并把 sessionid 在本次响应中返回给客户端。通常使用cookie 方式存储 sessionid 到客户端，在交互中浏览器按照规则将 sessionid 发送给服务器。如果用户禁用 cookie，则要使用 URL 重写，可以通过 response.encodeURL(url) 进行实现；当浏览器支持 Cookie 时，URL 不做任何处理；当浏览器不支持Cookie的时候，重写 UR L将sessionid 拼接到访问地址后。
3. 存储内容：
   1. cookie 只能保存字符串类型，以文本的方式。
   2. session 通过类似与Hashtable的数据结构来保存，能支持任何类型的对象（session中可含有多个对象）
4. 存储大小
   1. 单个 cookie 保存的数据不能超过4kb。
   2. session 大小没有限制。
5. 安全性：
   1. cookie：cookie 欺骗、cookie 截获
   2. session：session 的安全性大于 cookie
      1. sessionid 存储在 cookie 中，若要攻破 session 先要攻破 cookie
      2. sessionid 是用户登录或者启动 session_start 才会有，所以攻破 cookie 也不一定能得到
      3. 第二次启动 session_start 后，第一次的 sessionid 就失效了，session 过期后，sessionid 也随之失效
      4. sessionid 是加密的
6. 应用场景：
   1. cookie：
      1. 判断用户是否登录过网站，以便下次登录时能够实现自动登录（或者记住密码）
      2. 保存上次登录的事件等信息
      3. 保存上次查看的页面
      4. 浏览计数
   2. session：
      1. 网上商城中的购物车
      2. 保存用户登录信息
      3. 将某些数据放入session中，供同一用户的不同页面使用
      4. 防止用户非法登录
7. 缺点：
   1. cookie：
      1. 大小受限
      2. 用户可以操作(禁用)cookie，使功能受限
      3. 安全性较低
      4. 有些状态不可能保存在客户端
      5. 每次发送请求都会携带在请求头中，浪费带宽
   2. session：
      1. session 保存的东西越多，就越占用服务器内存
      2. 依赖于 cookie，如果 cookie 被禁用，则要使用 URL 重写

localStorage 与 sessionStorage

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