Backbone.js 本地存储，从服务器预先加载

Posted 2023-03-05

【中文标题】Backbone.js 本地存储，从服务器预先加载

【英文标题】：Backbone.js local storage, load from server upfront

【发布时间】：2012-01-13 06:34:41

【问题描述】：

我正在尝试使用backbone.js 构建一个移动应用程序，它将：

在第一次运行时从服务器加载项目列表 将这些提交到本地存储（我使用的是主干-localstorage.js） 能够将列表项保存为收藏夹，并将其保存在本地存储中

该应用永远不会将数据更改提交到服务器，而只会使用本地存储。

我正在手动从服务器加载数据并填充集合，一切正常，只是我无法将数据传输到本地存储。

我正用头撞墙，试图让它发挥作用。任何有关如何解决此问题的想法都将受到高度赞赏。我见过的所有示例要么提交到服务器，要么是纯本地存储。

【参考方案1】：

一些示例代码会很有用。

如果您已使本地存储正常工作，我不确定您在第一次运行时如何从服务器加载项目列表，但是，这可能是我将它们放在一起的方式。

最简单的方法是，如果您在应用程序运行期间无需返回服务器刷新任何模型，只需从嵌入应用程序的服务器交付模型，并在创建时加载它们你的收藏：

foo = new MyCollection(myJSONthatContainsAllTheModels)

有关详细信息，请参阅主干文档中的 Bootstrapping。

如果您需要，在应用程序运行过程中，定期从服务器刷新，然后..

使用backbone-localstorage 原样，只需进行一次更改。这意味着它将覆盖同步方法，任何正常的“获取”、“保存”等功能都将操纵本地存储。更改是在将 Backbone.Sync 替换为 LocalStorage 版本之前，将原始 Backbone.Sync 复制到一个名为 Backbone.ServerSync 之类的新函数中。这会保留 REST 同步。

然后，我将使用 Backbone.ServerSync 函数扩展 Backbone.Collection 并添加一个新函数，该函数用于从服务器获取数据。

backbone-localstorage 似乎不会干扰集合的 URL 属性，因此您应该可以很容易地做到这一点。

为了清楚起见，这个新的集合函数（称为 serverfetch）或多或少是 fetch 的克隆，但使用您的 Backbone.ServerSync 方法而不是 Backbone.Sync。

在从服务器获取响应并对其进行解析后，它将为每个应将它们提交到本地存储的模型调用 add。

【讨论】：

非常感谢爱德华！你让我走上正轨。我确实按照你的建议实施了它，它很有魅力。但是，我确实选择不从服务器引导初始负载。因为只有当数据不在本地存储中时才会发生这种情况，所以似乎没有必要总是用胖的 'ol JSON 对象来压低页面。

我是 Backbone 的初学者，我在很长一段时间内都在寻找这个解决方案，但是任何人都可以在 jsfiddle 上提供示例示例 - 从服务器获取数据并将其存储在本地存储中