【浏览器】Cookie、WebStorage

---

发展史

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。

---

Cookie

HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储。

cookie是由服务器生成，发送给浏览器，浏览器把cookie以键值对的形式保存到某个目录下的文本文件内，下一次请求同一网站会把cookie发送给服务器。

cookie是存在客户端，浏览器加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间。

cookie的构成：

• 名称：name(不区分大小写,但最好认为它是区分的)
  值:value(通过URL编码:encodeURIComponent)
  域
  路径
  失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间
  安全标志:设置安全标志后只有SSL连接的时候才发送到服务器

cookie的作用：主要用于保存登录信息

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

cookie的优点：具有极高的扩展性和可用性

• 通过良好的编程，控制保存在cookie中的session对象的大小
• 通过加密和安全传输技术，减少cookie被破解的可能性
• 只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失
  控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie

cookie的缺点：

• cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
• 安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用
• 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若把计数器保存在客户端，则起不到什么作用。

---

WebStorage本地存储

• WebStorage是本地存储，存储在客户端，包括localStorage和sessionStorage

• WebStorage的目标：

  • 提供一种在cookie之外存储会话数据的路径
    提供一种存储大量可以跨会话存在的数据的机制
  • HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

• WebStorage提供了一些方法，数据操作比cookie方便
  setItem (key, value) —— 保存数据，以键值对的方式储存信息。
  getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
  removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
  clear () —— 删除所有的数据
  key (index) —— 获取某个索引的key

• WebStorage的优点：

  • 存储空间更大：cookie为4KB，而WebStorage是5MB

  • 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量
    对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便

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

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

sessionStorage

• sessionStorage是Storage类型的一个对象，拥有clear()、getItem(name)、key(index)、removeItem(name)、setItem(name,value)方法
• sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
• 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据
• 临时保存

localStorage

• localStorage是Storage类型的一个对象
• 在HTML5中localStorage作为持久保存在客户端数据的方案取代了globalStorage(globalStorage必须指定域名)
• localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信
• 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
• 长久保存

sessionStorage和localStorage对比

	sessionStorage localStorage 相同	不同 localStorage	不同 sessionStorage
作用域	不同浏览器无法共享localStorage或sessionStorage中的信息。	相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口）	相同浏览器同页面或标签页间无法共享sessionStorage的信息 注：页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的
存储大小	localStorage和sessionStorage的存储数据大小一般都是：5MB
存储位置	都保存在客户端，不与服务器进行交互通信
存储内容类型都	只能存储字符串类型 注：对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
获取方式		window.localStorage	window.sessionStorage
应用场景		常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据	敏感账号一次性登录
保存时常		长期保存	临时保存

|