页面之间不共享本地存储

Question

我有一本 2 页的 epub3 书以及 Table 的目录页。我正在 Apple 图书中查看这本书，他们的内置 epub3 reader，在 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 的当前值 - 就像当我翻到目录的 Table 然后再次返回页面 1 和 2 时。关于 t1，第 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

我也尝试过使用会话数据，但第 1 页无法读取 t2，第 2 页无法读取 t1。因此，这将改为显示：

2019 年 8 月 9 日，21:09:18 空

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

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

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

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

Answer 1

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

Cookies

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

创建、读取和删除 cookie 的函数（致谢）：

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>

广播频道

BroadcastChannel 是一项非常新的功能，因此 "Books" 应用程序可能不支持它。但是这里有一个概念：

<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>

某种后端

如果上述 none 有效，您可能别无选择，只能使用某种后端来提供和保存数据

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

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

<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"
    },

    // ...
]

Window 参考资料

如果“图书”应用从第一个选项卡打开第二个选项卡，可能值得研究一下：

Window.postMessage()
- 其功能：
- Window.open() 打开第二个选项卡并获取对它的引用
- 和Window.opener获得开瓶器的引用

页面之间不共享本地存储

Local Storage is not shared between pages

html

javascript

epub

epub3

Cookies

广播频道

某种后端

Window 参考资料