Web Storage

Web Storage API 为浏览器提供了一种比cookies更加直观的方式来存储键值对的机制。
sessionStorage：保存在session中，如果用户关掉浏览器，数据会立即丢失。
localStorage：数据保存在客户端本地的硬件设备中，即使浏览器关闭了，数据依然存在。只有当应用本身或者用户手动清理本地存储空间是，数据才会被覆盖或清除。

• 保存数据：

sessionStorage.setItem(key,value);
  sessionStorage.key = value;
  sessionStorage[key] = value;

• 读取数据：只要网页时同源的，基于相同的键，我们都能够在其他网页中获得设置在sessionStorage上的数据。

sessionStorage.getItem(key);
sessionStorage.key;
sessionStorage[key];

• 存储的键值对的数量:

var length = sessionStorage.length;

• 删除单个数据：

sessionStorage.removeItem(key);

• 删除所有数据：

sessionStorage.clear();

• 获取指定位置的键：

sessionStorage.key(index);

Storage事件

无论何时，Storage 对象发生变化时（即创建/更新/删除数据项时，重复设置相同的键值不会触发该事件），StorageEvent事件会触发，与发生改变的窗口同源的每个窗口的window对象上都会触发Web Storage事件。
监听同源窗口的Storage事件：window.addEventListener("storage", displayStorageEvent)

StorageEvent接口：

• key: key属性包含了存储中被更新或删除的键
• oldValue: 更新前键对应的数据
• newValue: 更新后键对应的数据
• url: Storage事件发生的url地址
• storageArea:指向发生改变的localStorage

window.addEventListener("storage", function (e) {
    var logged = {
        key: e.key, //key属性包含了存储中被更新或删除的键
        oldValue: e.oldValue,
        newValue: e.newValue,
        url: e.url,
        storageArea: e.storageArea
    }
    console.log(JSON.stringify(logged, null, 2))
})

sessionStorage的作用域是限制在顶层窗口的，因此对sessionStorage的改变只有当有相牵连的窗口的时候才会触发事件

作为简单数据库使用

var data = {
    name: document.getElementById("name").value,
    age: document.getElementById("age").value,
    email: document.getElementById("email").value,
    tel: document.getElementById("tel").value
}
var str = JSON.stringify(data)
sessionStorage.setItem(data.name, str)