一个页面中的本地存储数据被修改时立即更新另一个页面的内容：
主页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id='text' placeholder="保存">
<button id='btn'>显示</button>
<iframe id='iframe' src="list.html" style="border: none;"></iframe>
</body>
</html>
<script>
var txt = document.getElementById("text")
var btn = document.getElementById("btn");
btn.addEventListener('click',function(){
document.getElementById('iframe').src = 'list.html';
setTimeout('Set()',100);
})
function Set(){
localStorage.setItem("key", txt.value);
}
</script> list.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
window.addEventListener("storage", function(e){
document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue + e.url);
});
</script> 用settimeount是因为更新速度过快导致DOM没有加载完成，iframe就来不及检测storage事件。
如果不用iframe，则需要同时打开2个页面。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
