注意：他只适用于同一个网站不同页面下的通信。因为localStorage中存储的数据只能在同一个网站下取到。
web storage
SessionStorage和LocalStorage都是浏览器本地存储，统称为Web Storage，存储内容大小一般支持5-10MB 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
-
xxxxxStorage.setItem('key', 'value'); 该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
-
var data = xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。
-
xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。
-
xxxxxStorage.clear() 调用该方法会清空存储中的所有键名
备注：SessionStorage存储的内容会随着浏览器窗口关闭而消失。 LocalStorage存储的内容，需要手动清除才会消失。
storage事件（以前没听说过）
-
Storage对象发生变化时触发（即创建/更新/删除数据项时，Storage.clear() 只会触发一次）。
-
在同一个页面内发生的改变不会起作用。
-
在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)
key : 修改或删除的key值，如果调用clear(),为null newValue : 新设置的值，如果调用clear(),为null oldValue : 调用改变前的value值,如果调用clear(),为null url : 触发该脚本变化的文档的url storageArea : 当前的storage对象
使用方法：
window.addEventListener('storage',function (event) {
//此处写具体业务逻辑
})
页面通信例子
该例子就是01.index.html中在localStorage中存储数据，02.index.html中的input中实时获取到数据并显示。使其两个输入框中的数据实时一样。
// 01.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提供数据</title>
</head>
<body>
<input type="text" id="input">
<script>
const input = document.getElementById("input");
input.onchange = () => {
localStorage.setItem("data", input.value)
}
</script>
</body>
</html>
// 02.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取数据</title>
</head>
<body>
<input type="text" id="input">
<script>
const input = document.getElementById("input");
window.addEventListener("storage", (event) => {
input.value = event.newValue
})
</script>
</body>
</html>
该demo需要你在同一个域名和端口下测试。所以你需要安装一个http-server包，来帮你启动项目。
npm install -g http-server
