时间戳

首页 > 解决方案 > 更新不同页面上的数据

javascript - 更新不同页面上的数据

问题描述

我有这两页

第 1 页：

<!DOCTYPE html>
<html>
<head>
    <title>page 1</title>
</head>
<body>
<input id="button" type="submit" value="Submit" onclick="save();"/>
<div id ="stat"></div>


<script type="text/javascript">

    var x=1 ;
    var test = document.getElementById("stat");
    function save() {
        x+=1;
        test.innerHTML=x;
        localStorage.setItem("value",x);
}
</script>
</body>
</html>

第2页：

<!DOCTYPE html>
<html>
<head>
    <title>page 2</title>
</head>
<body>
<div id ="stat"></div>

<script type="text/javascript">

var stat = document.getElementById("stat");
document.addEventListener('storage', function(e) {
        stat.innerHTML=localStorage.getItem("value");
    }, false);
</script>
</body>
</html>

我想做的是

  1. 在浏览器的两个不同选项卡（或窗口）上打开Page 1和。Page 2

  2. 去Page 1

  3. 单击按钮。

  4. 值得Page 1到更新。中的值Page 2也会同时更新。

  5. 单击按钮多少次您想要并获得相同的行为。

我搜索了一下，得到了使用本地存储的想法，但这不起作用。我怎样才能做到这一点？

标签： javascripthtmllocal-storage

解决方案

正如这里所说的https://www.w3schools.com/html/html5_webstorage.asp：

Web 存储是按来源（按域和协议）的。来自一个来源的所有页面都可以存储和访问相同的数据。

因此，两个离线网页不能共享同一个本地存储。它们必须从同一个域打开。一种方法是从 localhost Web 服务器打开它们。然后它将完美地工作。

推荐阅读