cookie、session、sessionStorage、localStorage

今天总结前端数据存储的几种方式

• cookie
• session
• sessionStorage
• localStorage

---

首先我们来说cookie和session的区别

• 保存状态：
  cookie保存在浏览器端
  session保存在服务器端

• 存储内容：
  cookie只能保存字符串类型，以文本的方式；
  session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

• 存储的大小：
  cookie：单个cookie保存的数据不能超过4kb，很多浏览器都限制一个站点最多保存20个cookie；
  session大小没有限制。

• 安全性：
  cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；
  session的安全性大于cookie。

• 应用场景：

cookie：

（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。（不推荐，有安全性问题）
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面
（4）浏览计数
（5）一些信息

session：

Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
　　（1）网上商城中的购物车
　　（2）保存用户登录信息
　　（3）将某些数据放入session中，供同一用户的不同页面使用
　　（4）防止用户非法登录

---

cookie和session的联系

session是通过cookie来工作的
容器通过浏览器端传送的cookie中的sessionid来区分不同的客户对象，所以Session依赖于cookie。

---

cookie和session各自的缺点

cookie：
（1）大小受限

（2）用户可以操作（禁用）cookie，使功能受限

（3）安全性较低

（4）有些状态不可能保存在客户端。

（5）每次访问都要传送cookie给服务器，浪费带宽。

（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：
（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

---

WebStroage

HTML5的WebStorage提供了两种API：

localStorage（本地存储）
sessionStorage（会话存储）

localStroage和sessionStroage的区别

• 生命周期：

  localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

  sessionStorage的生命周期是在仅在当前会话下有效。

• 存储大小：

  localStorage和sessionStorage的存储数据大小一般都是：5MB

• 存储位置：

  localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

• 存储内容类型：

  localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

• 获取方式：

  localStorage：window.localStorage;；
  sessionStorage：window.sessionStorage;。

• 应用场景：

  localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
  sessionStorage：敏感账号一次性登录；

WebStroage的优点

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操作比cookie方便；

setItem (key, value) ——  保存数据，以键值对的方式储存信息。
getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) ——  删除单个数据，根据键值移除对应的信息。
clear () ——  删除所有的数据
key (index) —— 获取某个索引的key

---

另附一张cookie和WebStroage的对比表格

屏幕快照 2018-09-18 下午10.57.03.png