1、概述 https://developer.mozilla.org/en-US/docs/Web/Events/storage localStorage 或者sessionStorage存儲的數據發生時會觸發storage事件。 2、示例 示例中會展示所有的storage事件屬性值。 A文件： B ...
1、概述
https://developer.mozilla.org/en-US/docs/Web/Events/storage
localStorage 或者sessionStorage存儲的數據發生時會觸發storage事件。
2、示例
示例中會展示所有的storage事件屬性值。
A文件：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener("storage", function(e) {
//事件目標 輸出：[object Window]對象（因為綁定在window上）
console.log("target: "+e.target);
//事件類型 輸出：storage
console.log("type : "+e.type);
//事件是否冒泡 輸出：false
console.log("bubbles : "+e.bubbles);
//事件是否可撤銷 輸出：false
console.log("tarcancelable: "+e.cancelable);
//鍵名
console.log("key: "+e.key);
//鍵值原值
console.log("oldValue: "+e.oldValue);
//鍵值新值
console.log("newValue: "+e.newValue);
//觸發事件的url
console.log("url: "+e.url);
//受影響的存儲空間 輸出[object Storage]
console.log("storageArea: "+e.storageArea);
});
</script>
</body>
</html>
B文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
localStorage.clear();
localStorage.setItem('foo', 'bar');
</script>
</body>
</html>
操作：先打開A頁面，後打開B頁面。
B頁面控制台輸入：
storage事件效果：
