1

我正在尝试 Firefox 3.5 中的离线存储代码，取自http://starkravingfinkle.org/blog/2008/05/firefox-3-offline-app-demo-part-2/。当页面加载时，我收到一个对话框，提示我应用程序正在请求存储数据，但是当我按下允许时，对话框并没有消失。该应用程序在网站上提供的在线演示中运行良好。包含 javascript 的源文件如下：

todo.html

<!--
  Simple task list application used to illusrate Firefox's offline/DOMStorage capabilities

  Author: Mark Finkle
-->

<html manifest="todo.manifest">
  <head>
    <title>TODO - Offline Demo</title>
    <script type="text/javascript" src="json.js"></script>
    <script language="javascript">
    var taskStorage = "[]";
    var storageDomain = location.hostname;
    if (storageDomain == "localhost")
      storageDomain += ".localdomain";

    function loaded() {
      updateOnlineStatus("load", false);
      document.body.addEventListener("offline", function () { updateOnlineStatus("offline", true) }, false);
      document.body.addEventListener("online", function () { updateOnlineStatus("online", true) }, false);

      if (typeof globalStorage != "undefined") {
        var storage = globalStorage[storageDomain];
        if (storage && storage.taskStorage) {
          taskStorage = storage.taskStorage;
        }
      }

      fetchList();
    }

    function updateOnlineStatus(msg, allowUpdate) {
      var status = document.getElementById("status");
      status.innerHTML = (navigator.onLine ? "[online]" : "[offline]");

      var log = document.getElementById("log");
      log.appendChild(document.createTextNode("Event: " + msg + "\n"));

      if (navigator.onLine && allowUpdate) {
        update();
        log.appendChild(document.createTextNode("Updated server\n"));
      }

    }

    function httpRequest(type, data, callback) {
      var httpreq = new XMLHttpRequest();
      httpreq.onreadystatechange = function() { if (httpreq.readyState == 4) callback(httpreq.readyState, httpreq.status, httpreq.responseText); };
      httpreq.open(type, "todo-server.php", true);
      if (type == "POST") {
        httpreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      }
      httpreq.send(data);
    }

    function loadList(readyState, status, responseText) {
      if (readyState == 4) {
        if (status == 200) {
          taskStorage = responseText;
          var tasks = eval("(" + taskStorage + ")");
          var html = "";
          for (var i=0; i<tasks.length; i++) {
            html += "<input type='checkbox' id='" + tasks[i].name + "'/><label for='" + tasks[i].name + "'>" + tasks[i].data + "</label><br/>";
          }
          document.getElementById("tasklist").innerHTML = html;


          if (typeof globalStorage != "undefined") {
            globalStorage[storageDomain].taskStorage = taskStorage;
          }
        }
      }
    }

    function fetchList() {
      if (navigator.onLine) {
        httpRequest("GET", null, loadList);
      }
      else {
        loadList(4, 200, taskStorage);
      }
    }

    function addItem() {
      var data = document.getElementById("data").value;
      document.getElementById("data").value = "";

      var tasks = eval("(" + taskStorage + ")");
      tasks.push({"name": Date.now(), "data": data });

      taskStorage = tasks.toJSONString();
      update();
    }

    function removeItems() {
      var tasks = eval("(" + taskStorage + ")");
      var newTasks = [];

      var items = document.getElementById("tasklist").getElementsByTagName("input");
      for (var i=0; i<items.length; i++) {
        if (items[i].checked == false) {
          newTasks.push(tasks[i]);
        }
      }

      taskStorage = newTasks.toJSONString();
      update();
    }

    function completeItems() {
      var tasks = eval("(" + taskStorage + ")");

      var items = document.getElementById("tasklist").getElementsByTagName("input");
      for (var i=0; i<items.length; i++) {
        if (items[i].checked) {
          var task = tasks[i].data;
          if (task.indexOf("<strike>") != -1) {
            task = task.replace("<strike>", "");
            task = task.replace("</strike>", "");
          }
          else {
            task = "<strike>" + task + "</strike>";
          }
          tasks[i].data = task;
        }
      }

      taskStorage = tasks.toJSONString();
      update();
    }

    function update() {
      if (navigator.onLine) {
        var post = "action=update&data=";
        post += encodeURIComponent(taskStorage);
        httpRequest("POST", post, function(readyState, status, json) { fetchList(); });
      }
      else {
        loadList(4, 200, taskStorage);
      }
    }
    </script>

    <style type="text/css">
      body          { font-family: verdana,tahoma, arial; }
      div#container { width: 300px; }
      div#title     { font-size: 120%; }
      div#subtitle  { font-size: 80%; }
      div#tasklist  { margin-bottom: .5em; }
      div#log       { font-size: 90%; background-color: lightgray; margin-top: 1em; white-space: pre; }
    </style>

  </head>
  <body onload="loaded();">
    <div id="container">
      <div id="title">Task Helper - <span id="status">ONLINE</span></div>
      <div id="subtitle">simple online/offline demo application</div>
      <hr />
      <div id="tasklist">
      </div>
      <input type="text" id="data" size="35" />
      <input type="button" value="Add" onclick="addItem();"/>
      <hr />
      <input type="button" value="Remove" onclick="removeItems();"/>
      <input type="button" value="Complete" onclick="completeItems();"/>
      <div id="log"><strong>Event Log</strong>
      </div>
    </div>
  </body>
</html>
4

2 回答 2

0

我相信 localStorage api 正在取代 FF 3.5 中的 globalStorage。您可以在此处阅读更多相关信息：https ://developer.mozilla.org/en/DOM/Storage

我认为 api 非常相似，所以你可以尝试这样的事情：

var storage;
if (typeof localStorage != "undefined") {
    storage = localStorage;
}
else if (typeof globalStorage != "undefined") {
    storage = globalStorage[storageDomain];
}
if (storage && storage.taskStorage) {
    taskStorage = storage.taskStorage;
}

希望有帮助！

编辑：在您使用 globalStorage 的任何地方，您都必须检查 localStorage。或者在范围内提升存储变量并检测一次。

于 2009-07-24T15:17:53.683 回答
0

所以在阅读了两次问题之后，我想我理解了这个问题：你问的是globalStorage在 file:/// 文件中使用。

globalStorage（以及 localStoragefile:/// ）在Firefox 3.5的文档中效果不佳。我没有看到关于这个问题的具体错误报告，但由于globalStorage不赞成使用localStorage，所以这并不重要。

如果你只是测试一下，在本地安装某种网络服务器，一点都不复杂。

于 2009-10-26T13:21:29.260 回答