Web Storage

Cookie

由于HTTP协议是无状态的，而服务器的业务必须是有状态的。Cookie诞生的最初目的是为了存储Web中的状态信息，以方便服务器使用。例如判断用户是否第一次访问站点。

Cookie的操作步骤可以分为四个步骤

1. 服务器向客户端浏览器发送Cookie
2. 客户端浏览器将Cookie以键值对的形式保存到本地某个目录的文件中
3. 每次HTTP请求客户端浏览器都会将Cookie发送给服务器（前提是浏览器开启了Cookie）
4. Cookie通过HTTP请求报文和响应报文配合完成会话过程

Cookie所存在的缺点

• Cookie的体积过大会造成请求和响应速度变慢
• 浏览器发出的任何请求都会携带Cookie，即使是访问静态资源。
• Cookie可以在前后端进行修改，数据容易被篡改或伪造。
• Cookie对于敏感数据的保护基本上是无效的
• 用户可以通过设置浏览器来禁用Cookie
• Cookie不能够跨域，即跨越多个域名进行使用。
• 单个Cookie保存的数据最大不能超过4KB，多数浏览器会限制一个站点最多能保存Cookie的个数，默认为20个。

Web Storage

早期客户端储存数据都是由Cookie完成的，由于Cookie大小限制为4KB，不适合大量数据的存储。Cookie的作用是与服务器进行交互，并作为HTTP规范的一部分而存在。Cookie由每个对服务器的请求来传递，这使得Cookie速度很慢且效率不高。

H5中数据不是由每个服务器请求传递的，而是只有在请求时才会使用数据，因此使在不影响性能下存储大量数据成为可能。Web Storage的出现仅仅是为了在本地存储数据而生，使用JS来存储和访问数据。对于浏览器而言，使用Web Storage存储键值对比存储Cookie更为直观，而且容量更大。

Web Storage出现的目的是为了克服由Cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回给服务器。Web Storage的主要目标是提供一种在Cookie之外存储会话数据的途径，提供一种存储大量数据且可以跨会话存在的数据机制。

H5的Web Storage存储是本地存储，是存储在客户端的，并以键值对的形式存储，通常是以字符串的方式进行存储，这意味着数值类型会自动转换为字符串类型，所以最好的方式是每次存储时将复杂的数据使用JSON.stringify转换为JSON字符串，取出使用时在使用JSON.parse转换为对象。

H5提供了两种在客户端存储数据的方式分别是localStorage长期存储和sessionStorage临时存储，即这两个都是Storage的一个实例。值得注意的是数据存储无论是localStorage还是sessionStorage都是特定于页面的协议。

Web Storage API

方法	作用
setItem(key, value)	保存数据以键值对的方式存储信息
getItem(key)	根据键名读取数据
removeItem(key)	根据键名删除单个数据
clear()	清除所有数据
key(index)	获取指定索引的键名

localStorage 永久存储

localStorage是没有时间限制的数据存储，本地存储的生命周期是永久的，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小一般是5MB，数据仅仅在客户端浏览器中保存，并不会参与到与服务器的通信中。

只读的localStorage是一个允许访问当前Document源（origin）的本地存储空间Storage对象，存储的数据将保存在浏览器会话中，localStorage类似sessionStorage，与之不同的是存储在localStorage中的数据可以长期保留，当页面会话结束即页面被关闭时存储在sessionStorage中的数据则会被清理掉。

方法	作用
localStorage.setItem(key, value)	保存数据到本地
localStorage.getItem(key)	从本地中读取数据
localStorage.removeItem(key)	从本地删除已存在的数据
localStorage.clear()	清除本地所有数据
localStorage.key(index)	根据索引获取本地存储空间中的键名
localStorage.length	获取本地存储空间中数据的条数

sessionStorage 临时存储

sessionStorage是针对一个会话的数据存储，存储在sessionStorage中的数据会在浏览器会话结束时被清除掉，也就是浏览器关闭时。

sessionStorage临时存储会为每个数据源维持一个存储区域，在浏览器打开期间一直存在，包括页面重新加载时。sessionStorage的生命周期是在浏览器关闭前，也就是说，在整个浏览器未关闭前，数据一直都是存在的。

sessionStorage仅仅在当前会话下有效，当关闭页面或浏览器时会被自动清除。存放数据大小一般为5MB，仅仅在客户端浏览器中保存，不参与和服务器的通信。

方法	作用
sessionStorage.setItem(key, value)	保存数据到本地会话
sessionStorage.getItem(key)	从本地会话中读取数据
sessionStorage.removeItem(key)	从本地会话中删除已存在的数据
sessionStorage.clear()	清除本地会话中所有数据

需要注意的是

• 页面刷新并不会消除数据
• 只有在当前页面打开的链接中才能访问sessionStorage中的数据
• 使用window.open打开页面和改变location.href方式都可以获取到sessionStorage中的数据

storage事件

在某些情况如果多个页面都需要访问本地存储的数据，就需要在存储区域的内容发生改变时通知相关页面。Web Storage API内建了一套事件通知机制，当存储区域的内容发生改变时比如新增、修改、删除数据时，会自动触发storage事件，并将其发送给所有感兴趣的监听者。如果需要跟踪存储区域的改变，就需要关心存储区域内容的页面监听storage事件。

所有支持localStorage的浏览器都支持storage事件，包括IE8，但IE8并不支持W3C标准的addEventListener()方法。因此，为了监听storage事件需要检测浏览器的兼容性。

if(window.addEventListener){
  window.addEventListener("storage", storageHandler, false);
}else{
  window.attachEvent("onstorage", storageHandler);
}

storageHandler回调函数接受一个StorageEvent参数，在IE中StorageEvent对象保存在window.event对象中。

function storageHandler(storageEvent){
  if(!storageEvent){
    storageEvent= window.event;
  }
}

storageEvent对象属性

属性	作用
key	设置或删除或修改的键名，当调用clear()方法时会为null。
oldValue	改变之前的旧值，如果是新增的元素则为null。
newValue	改变之后的新值，如果是删除的元素则为null。
storageArea	一个指向发生变化的sessionStorage或localStorage的引用
url	触发改变事件页面的URL

监听本地存储的变化，当storage发生变化比如新增、更新、删除时会自动触发，同一页面发生的改变不会出发，只会监听同一域名下其他页面的改变。

window.addEventListener("storage", function(e){
  console.log(e.url, e.key, e.oldValue, e.newValue);
});