LocalStorage，几个Ajax请求还是巨大的Ajax请求？

Question

我面临一个非常大的问题（至少对我而言）。我会给你一些背景知识。

我正在开发一个移动网络应用程序，它将显示我所在城市的公交车站和自行车站的信息。它将显示公共汽车和自行车停靠点的GMap标记，如果您点击它，您将获得有关公共汽车的到达时间或可用的自行车数量的信息。我把它盖得很漂亮。

有问题的部分是加载电台。

我的第一种方法是在页面加载时加载整个数量的工作站。它大约是200 Kb的JSON加上迭代数组并将其放入地图的时间。它们被隐藏起来，因此当用户点击行名称时，它们会使用“findMarker”函数显示。如果地图上存在其他工作站，则会隐藏它们以避免地图中有太多标记。

这适用于iPhone 4或全新HTC等新手机，但对于2年前的手机效果不佳。

我认为的第二种方法是按要求加载 ，因此您点击工作站，将它们加载到地图中，然后显示，但这会导致两个问题：

• 首先，您可能（或可能不是）执行多项请求 可能会结束相同的（？）
• 第二个是避免这样做 许多标记，它们应该被隐藏或删除，因此您可能正在删除 一段时间内应该再次需要的信息，比如自行车站 是作为一个群体加载而不是按行加载。

最后，我考虑过使用 LocalStorage 来存储它们，因为它们不会改变那么多，但会有大量的数据，然后，屁股很难找到它们是键值，而且（我并不确定）我可以找到不支持此功能的设备必须回退到其他选项之一。

所以，那就是说，我认为可能是有人遇到了类似的问题并以某种方式解决了它或者对我有一些提示:)。

任何帮助都会非常感激。

Answer 1

最佳方法取决于用户的行为。他们通常点击很多站点还是只点击几个站点？他们更喜欢更快的启动（按需加载）还是更敏感的站点详细显示（预加载数据）？

值得研究的方法是加载数据按请求，但使用浏览器缓存（ETag和Expires标头）以避免反复检索相同的信息。这可以在不处理LocalStorage的情况下解决您的问题。

有关浏览器缓存的不同方法ETag vs Header Expires

，请参阅此问题