客户端存储之Storage

介绍

作为 Web Storage API的接口，Storage提供了访问特定域名下的会话存储或本地存储的功能。
Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用 cookie 的问题。
Web Storage 的第 2 版定义了两个对象：localStorage 和 sessionStorage。localStorage是永久存储机制，sessionStorage 是跨会话的存储机制。这两种浏览器存储 API 提供了在浏览器中不受页面刷新影响而存储数据的两种方式。

storage属性和方法

Storage.length(只读) 返回一个整数，表示储存在storage对象中数据项的数量
Storage.key()
接受一个数值n作为参数，并返回储存中的第n个键名
Storage.getItem()
接收一个键名作为参数，返回键名对应的值
Storage.setItem()
接收一个键名和值作为参数，把键值对添加到储存中，如果存在则更新
Storage.removeItem()
接收一个键名作为参数，并把键名从储存中删除
Storage.clear()
清空储存中所有的键名

注意 Storage 类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。注意，这种转换不能在获取数据时撤销。

sessionStorage

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时会消失的会话cookie类似。
存储在sessionStorage中的数据不受页面刷新影响，因为 sessionStorage 对象与服务器会话紧密相关，所以在运行本地文件时不能使用。存储在
sessionStorage 对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。

方法使用

//储存数据
sessionStorage.setItem('name', '测试')
sessionStorage.setItem('age', 20)

//读取数据
let myName = sessionStorage.getItem('name')
console.log('name', myName)

console.log(sessionStorage.key(1), sessionStorage.getItem(sessionStorage.key(1)))

//读取所有数据
for (i = 0; i < sessionStorage.length; i++) {
    console.log(sessionStorage.key(i), sessionStorage.getItem(sessionStorage.key(i)))
}

//获取数据长度
console.log('length', sessionStorage.length)

//删除单个
sessionStorage.removeItem('name')

//删除所有
sessionStorage.clear()

localstorage

在修订的 HTML5 规范里，localStorage 对象取代了 globalStorage，作为在客户端持久存储
数据的机制。要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端
口上使用相同的协议。

方法使用

//储存数据
localStorage.setItem('name', '测试')
localStorage.setItem('age', 20)

//读取数据
let myName = localStorage.getItem('name')
console.log('name', myName)

console.log(localStorage.key(1), localStorage.getItem(localStorage.key(1)))

//读取所有数据
for (i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i), localStorage.getItem(localStorage.key(i)))
}

//获取数据长度
console.log('length', localStorage.length)

//删除单个
localStorage.removeItem('name')

//删除所有
localStorage.clear()

储存事件

每当 Storage 对象发生变化时，都会在文档上触发 storage 事件。

window.addEventListener("storage", 
 (event) => alert('Storage changed for ${event.domain}'));
domain：存储变化对应的域。
key：被设置或删除的键。
newValue：键被设置的新值，若键被删除则为 null。 
oldValue：键变化之前的值。