Question

我有两个jQuery移动页面（#list和#show）。 #list页面上有几个具有不同ID的项目。如果我点击第5项，ID no5将存储在localStorage中，我将被重定向到页面#show

现在问题：在localStorage中存储ID可以正常工作，但是下一页显示的不是5号项目，但是它显示了一个旧项目，之前在localStorage中。

页面#list

中的

脚本

localStorage.setItem("garageID", $(this).attr('id'));                           
window.location.replace("#show");

Answer 1

我也遇到过这个问题（而不是在手机上：在Chromium / linux上）。

由于似乎没有基于回调的API，我使用超时“修复”它，以防止在setItem操作完成之前关闭页面：

localStorage.setItem(name, value);                           
setTimeout(function(){
     // change location
}, 50);

0的超时可能就足够了，但由于我没有找到任何规范（可能是在bug的范围内）并且问题没有得到一致的再现，我没有抓住任何机会。如果你想要，你可以循环测试：

function setLocalStorageAndLeave(name, value, newLocation){
    value = value.toString(); // to prevent infinite loops
    localStorage.setItem(name, value);
    (function one(){
         if (localStorage.getItem(name) === value) {
            window.location = newLocation;
         } else {
            setTimeout(one, 30);
         }
    })();
}

但我不明白localStorage.getItem返回正确值的事实如何保证它真的以永久方式编写，因为没有可中断行为的规范，我不知道是否{{3}可以合法地解释为允许浏览器忘记在磁盘离开页面时转储磁盘：

本规范不要求上述方法等到数据已物理写入磁盘。只有一致性访问相同的键/值列表的不同脚本对看见是必需的。

在您的确切情况下，解决方案可能只是滚动到具有该给定名称的元素，以避免更改页面。

关于推定错误的说明：

我没有找到也没有填写任何错误报告，因为我觉得很难重现。在我在Chromium / linux上观察到的情况下，它发生在delete操作。

Answer 2

免责声明：此解决方案不是官方，仅针对演示进行测试，而非生产。

您可以使用$.mobile.changePage("target", { data: "anything" });在页面之间传递数据。但是，它仅在目标是 URL （又名单页模型）时才有效。

尽管如此，您仍然可以在页面之间传递数据 - 即使您使用多页模型 - 但您需要手动检索它。

当页面改变时，它会经历几个阶段，其中一个是pagebeforechange。该事件包含两个对象事件和数据。后一个对象包含与您正在移动的页面以及您要访问的页面相关的所有详细信息。

由于$.mobile.changePage()会忽略多页模型上的传递参数，因此您需要将自己的属性推送到data.options对象中，通过{{ 1}}然后在触发$.mobile.changePage("#", { options })时检索它。这样您就不需要 localstorage ，也不需要回调或pagebeforechange。

第一步：

更改页面时传递数据。使用唯一的属性，以免与jQM冲突。我使用过setTimeout。
```
stuff
```
第二步：

在您移动到的网页上触发/* jQM <= v1.3.2 */ $.mobile.changePage("#page", { stuff: "id-123" }); /* jQM >= v1.4.0 */ $.mobile.pageContainer.pagecontainer("change", "#page", { stuff: "id-123" });时检索数据，例如pagebeforechange。
```
#show
```

<强> Demo

在localStorage中存储变量太慢了

2 个答案: