第五章 localStorage
sessionStorage关闭单个窗口,数据就会消失,localStorag可以长期保存数据,有特定的storage事件。
https://blog.csdn.net/ruangong1203/article/details/52841135
1.html
<!DOCTYPE html>
<html>
<head lang="en">
<title>A</title>
</head>
<body>
//第一步:第一次打开1.html的时候,什么都没存储
//第三部:我再打开1.html,我发现多了数据foo=bar,为什么我们能发现那,storage检测到了
<script>
window.addEventListener("storage", function (e) {
alert(e.newValue);
});
</script>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<head lang="en">
<title>B</title>
</head>
<body>
//第二步:我打开了2.html,把数据foo=bar存储了
<script>
localStorage.clear();
localStorage.setItem('foo', 'bar');
</script>
</body>
</html>
3.html 自己监测自己(了解)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>A</title>
</head>
<body>
<button id="btn">存储数据</button>
<script>
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue);
});
var btn=document.getElementById("btn");
btn.onclick=function(){
localStorage.setItem("nm","abc");
}
</script>
</body>
</html>