个人中心
gpt4 book ai didi

javascript - 页面之间不共享本地存储

转载 作者：搜寻专家 更新时间：2023-11-01 05:19:08 24 4
gpt4 key购买 nike

我有一本 epub3 书，有 2 页和目录页。我正在 Apple 的图书中查看这本书，他们的内置 epub3 阅读器，在 Mac OSX 上。两个页面并排显示。第一页如下:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=500, height=600"/>
    </head>
    <body>

<p id="result"></p>

<script>
//<![CDATA[
  var current_page = "1";
  var other_page = "2";

  var t = 0;

  setInterval(function() {

    var d = new Date();
    var storage = localStorage; 

    storage.setItem("t"+ current_page, d.toLocaleString());

    document.getElementById("result").innerHTML = storage.getItem("t"+ current_page) +" "+storage.getItem("t"+ other_page);    
  }, 1000);

//]]>
</script>

    </body>
</html>

我的第二页唯一不同的是:

  var current_page = "2";
  var other_page = "1";

因此每一秒，页面 1 将当前时间保存到本地存储作为 t1，页面 2 对值 t2 执行相同的操作。同时，两个页面都从本地存储中读取 t1 和 t2，然后再将它们的值显示到屏幕上。但是在 ibooks 中，页面 1 仅在重新加载页面时设法显示 t2 的当前值 - 就像我翻到目录然后再​​次返回页面 1 和 2 时一样。关于 t1，Page 2 也发生了类似的事情。

所以在时间 21:10:00，第 1 页可能会显示:

08/09/19, 21:09:18 08/09/19, 21:08:58

和第 2 页:

08/09/19, 21:09:22 08/09/19, 21:08:01

我也尝试过使用 session 数据，但页面 1 永远无法读取 t2，而页面 2 也无法读取 t1。因此，这将改为显示:

08/09/19，21:09:18 空

我可以想到几个应用程序，在这些应用程序中，页面相互通信非常有用。

例如，如果一个视频正在一个页面上播放，如果另一个页面上的视频开始播放则停止它会很有用。这通常使用 session 存储来完成。这与我自己的用例有关，也是我开始探索这个问题的原因。

同样，如果要求用户在第 1 页输入故事主 Angular 的姓名，则该条目应在输入后立即出现在第 2 页。

除了 Local 或 Session Storage 之外，Pages 在 epub3 中还有其他方式相互通信吗？

最佳答案

我不知道 epub3，也没有要测试的 MAC，但我想到了以下四种可能的解决方案:

Cookies

对于该用例，它的性能不如 localStorage，但如果您没有太多选择，那总比没有好。

创建、读取和删除 cookie 的函数(致谢https://stackoverflow.com/a/28230846/9150652):

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

示例的用法:

<script>
//<![CDATA[
  var current_page = "1";
  var other_page = "2";

  var t = 0;

  setInterval(function() {

    var d = new Date();

    setCookie("t"+ current_page, d.toLocaleString(), 100); // 100 days

    document.getElementById("result").innerHTML = getCookie("t"+ current_page) +" "+getCookie("t"+ other_page);    
  }, 1000);

//]]>
</script>

广播 channel

BroadcastChannel 是一项非常新的功能，因此“图书”应用程序可能不支持它。但这里有一个概念:

<script>
//<![CDATA[
  var broadcaster = new BroadcastChannel('test');
  var current_page = "1";
  var other_page = "2";

  var t = 0;

  setInterval(function() {

    var d = new Date();

    // Send message to all other tabs with BroadcastChannel('test')
    bc.postMessage({
        senderPage: "t"+ current_page,
        date: d.toLocaleString()
    });
  }, 1000);

  broadcaster.onmessage = (result) => {
      if(result.senderPage == "t"+ other_page) { // If the message is from the other page
        // Set HTML to current date + sent Date from other page
        var d = new Date();
        document.getElementById("result").innerHTML = d.toLocaleString() +" "+result.date;    
      }
  };

//]]>
</script>

某种后端

如果以上方法都不起作用，您可能别无选择，只能使用某种后端来提供和保存数据

如果它只适合您，我建议您使用 Firebase 或 MongoDB Atlas 的免费套餐，因为它们都在其免费套餐上提供了相当大的值(value)。

如果你用后端来做，它可以用这样的东西来完成:

<script>
//<![CDATA[
  var current_page = "1";
  var other_page = "2";
  var lastLocalDate = new Date();
  const serverUrl = "http://someUrl.com/endpoint/"

  // Gets the latest date of the other page via ajax
  function getUpdate() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            // If successful, update HTML
            if (xmlhttp.status == 200) {
                document.getElementById("result").innerHTML = lastLocalDate.toLocaleString() +" "+xhr.responseText;
            }

            // Update the date of this page anyways
            sendUpdate();
        }
    };

    // GET request with parameter requestingPage, which is the other page
    xmlhttp.open("GET", serverUrl, true);
    xmlhttp.send(`requestingPage=${other_page}`);
  }

  // Sends the current date of this page to the webserver
  function sendUpdate() {
    var xmlhttp = new XMLHttpRequest();

    // No need to check if successful, just update the page again
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            getUpdate();
        }
    };

    lastLocalDate = new Date();

    // POST request with parameters page and date
    xmlhttp.open("POST", serverUrl, true);
    xmlhttp.send(`sendingPage=${current_page}&data=${lastLocalDate.toLocaleString()}`);
  }

  // Start with sending an update (so that lastLocalDate is at least sent once to the server)
  sendUpdate();
//]]>
</script>

你后端的一些方法需要看起来像这样(注意这不是任何语言的有效代码):

@GET
function getDate(requestingPageId)
    find latest entry with page.id == requestingPageId
    return page.date

@POST
function saveDate(savingPage, savingDate)
    store new page element with 
        page.id = savingPage
        page.date = savingDate

数据库中的集合如下所示:

[
    {
        id: 1,
        date: "date"
    },{
        id: 2,
        date: "date"
    },{
        id: 2,
        date: "date"
    },{
        id: 1,
        date: "date"
    },

    // ...
]

窗口引用

如果 Books 应用从第一个选项卡打开第二个选项卡，可能值得研究一下:

关于javascript - 页面之间不共享本地存储，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55971432/

24 4 0
文章推荐： javascript - 如何创建动态 HTML header
文章推荐： javascript - 当只有一个 effect 的 deps 发生变化，而不是其他的时，React useEffect Hook
文章推荐： JavaScript 通过索引抓取对象/json
文章推荐： javascript - 使用 converge 生成列表的所有旋转时出现意外结果
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com