Cookie 第五章 localStorage

最新推荐文章于 2023-04-21 16:50:24 发布

小涛涛啊！

最新推荐文章于 2023-04-21 16:50:24 发布

阅读量125

点赞数

分类专栏： Cookie 文章标签： cookie

本文链接：https://blog.csdn.net/t5555666/article/details/108913695

版权

Cookie 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第五章 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>

小涛涛啊！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Cookie 第五章 localStorage

第五章 localStoragesessionStorage关闭单个窗口，数据就会消失，localStorag可以长期保存数据，有特定的storage事件。https://blog.csdn.net/ruangong1203/article/details/528411351.html<!DOCTYPE html><html><head lang="en"> <title>A</title></head>&
复制链接

扫一扫