html5 笔记8 web storage

1、在webStorage之前，远程服务器需要存储客户端和服务器间交互所使用的所有相关数据；而使用webStorage，只要将需要跨请求重复访问的数据直接存储在客户端的浏览器中，这样可以快速回复数据，减小网络流量。

2、webStorage 和cookie：
cookie的大小受限（4kb），不能存储大点的数据；只要有请求设计到cookie，cookie就会在服务端和客户端之间来回的传送，消耗网络带宽。
webStorage是将数据存储在js对象中，对象在页面加载的时候保存，并且容易获取。通过使用sessionStorage或localStorage，在打开新窗口或新标签页或重启浏览器时，可以选择是否激活这些数据。

3、检测浏览器的支持性
特定域下storage数据库可直接利用window对象访问，因此，确定用户的浏览器是否支持webStorage，只要检查它是否存在window.localStorage或window.sessionStorage就行了。

function checkStorageSupport() {

    //sessionStorage
    if (window.sessionStorage) {
      alert('This browser supports sessionStorage');

      //Do something with sessionStorage
      window.sessionStorage.mySessionKey = 'Session example';
      alert(window.sessionStorage.mySessionKey);

    } else {
      alert('This browser does NOT support sessionStorage');
    }

    //localStorage
    if (window.localStorage) {
      alert('This browser supports localStorage');

      //Do something with localStorage
      window.localStorage.myLocalKey = 'Local example';
      alert(window.localStorage.myLocalKey);

    } else {
      alert('This browser does NOT support localStorage');
    }
  }

4、sessionStorage

设置：window.sessionStorage.setItem("a", "b");  或  window.sessionStorage.a = "b"
获取：window.sessionStorage.getItem("a");   或   window.sessionStorage.a
设置和获取的调用不必出现在同一个网页中，只要网页时同源的，基于相同的键，就可以获得设置在sessionStorage上的数据。

设置在sessionStorage上的对象，只要浏览器或标签没关闭就会一直存在，关闭后sessionStorage数据就会被清除。sessionStorage适合用在短时存在的流程中，同时又可以在多个页面中共享的数据。

5、localStorage与sessionStorage

localStorage在使用上和sessionStorage是一样的，不同的事它们的生命周期和它们的共享方式。localStorage的生命周期比窗口货浏览器的生命期长，并且数据是可以被同源的窗口和标签所共享（和cookie类似了）；seesionStorage的生命周期是在窗口货标签关闭后死亡，并且它的值只在构建它的窗口或标签内可见。
localStorage是持久化的本地存储，数据时永远不会过期的；seesionStorage是本地存储的一个会话中的数据，会话级别的。

6、更新web storage后的通知

html5内建了一套事件通知机制，可以将数据更新通知发给感兴趣的监听者，无论监听窗口是否存储过数据，与执行存储操作的窗口同源的每个窗口的对象上都会触发web storage事件。

window.addEventListener("xxstorage", event, true);