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)
