网页间通信

JS脚本　2024/11/19 21:15:02　　点击：不统计

原文是网站制作学习网的FoAｓＰ.cn

实现同一个域名下,打开多个页面，页面之间的通信，是通过监听 localStorage 的相关关键词变动实现的。必须在同一个域名下

下面看一下两个页面之间通信的案例：

（下面代码可以直接打开两个页面进行哈看）

操作页面：

https://www.forasp.cn/test/2024111921124170907.html

监听页面：

https://www.forasp.cn/test/202411192113911195.html

操作页面代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>操作页面</title>
    <script>
        function logout() {
            localStorage.setItem('isLoggedIn', 'false');
        }
        function login() {
            localStorage.setItem('isLoggedIn', 'true');
        }
    </script>
</head>

<body>
    <button onclick="login()">登入</button>
    <button onclick="logout()">登出</button>
</body>

</html>

监听页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>监听展示页面</title>
    <script>
        //网页间检查用户是否已登录
        function checkLoginStatus() {
            const isLoggedIn = localStorage.getItem('isLoggedIn');
            if (isLoggedIn === 'true') {
                console.log('用户已登入');
            } else if (isLoggedIn === 'false') {
                console.log('用户已登出');
            } else {
                console.log('用户状态未知');
            }
        }
        // 监听 localStorage 变化
        window.addEventListener('storage', (event) => {
            if (event.key === 'isLoggedIn') {
                checkLoginStatus();
            }
        });
        // 初始化时检查登录状态
        window.onload = checkLoginStatus;
    </script>
</head>

<body>
    <h1>自动检查登录登出，右击网页，选择检查 控制台打印显示结果</h1>
</body>

</html>

原载于:文章来源：www.forasp.cn网站制作学习

·上一篇：node 安装指定版本 >> 　　　·下一篇：网站制作学习网