早些时候，本地存储使用的是cookie，在HTML5种，新增了Web Storage的存储方式，这些数据不会保存在服务器上，只用于用户请求网站数据上，它可以存储大量的数据，更加安全与快速，而不影响网站的性能。

Web Storage分为会话数据与长期数据——sessionStorage(保存会话数据)和localStorage(在客户端长期保存数据)。

sessionStorage

该数据是被保存在session对象中。用于临时保存同一窗口(或标签页)的数据，即保存用户临时会话数据，在关闭窗口或标签页之后，就会将session对象种的所有数据删除。

常用方法

  1. // 存储值
  2. sessionStorage.setItem(key,value); 
  3. // 获取值
  4. sessionStorage.getItem(key)

localStorage

该数据是被保存在localStorage对象中。用于长久保存整个网站的数据，该对象可将数据长期保存在客户端中，即使是重新打开浏览器也不会丢失，知道手动去除。

  1. //存储值
  2. localStorage.setItem(key,value)
  3. //获取值
  4. localStorage.getItem(key)
  5. //删除单个数据
  6. localStorage.removeItem(key)
  7. //删除所有数据
  8. localStorage.clear()

cookies

将数据保存在用户的客户端，存在于用户硬盘文件上。其缺点是：限制保存数据空间大小、数据保密性差、代码操纵复制等。

sessionStorage、localStorage和cookie区别

数据的有效性不同

sessionStorage仅在当前浏览器中有效，关闭浏览器数据消失
localStorage关闭浏览器也有效
cookie只在设置cookie过期时间内有效，无论浏览器是否关闭。

作用域不同

sessionStorage不在不同浏览器窗共享，不会受到其他页面更改而更改；
localStorage在所有同源窗口中共享
cookie也是所有同源窗口中共享

为什么选择Web Storage而不是Cookie？

web Storage的优势有：

  1. 存储空间比cookie大
  2. 存储内容不会发送到服务器。而cookie的内容会随着请求一并发送到服务器，这对于本地存储是一种宽带浪费。
  3. 独立的存储空间，不会造成数据混乱。
  4. 更多丰富易用的接口，使数据操作更为简单