为移动应用程序读写JSON文件

Question

我正在制作一个移动应用程序。因为我想要一个可以在多个平台上工作的解决方案，所以我从Cordova开始。由于我有很多数据要处理和许多视图，我决定使用Ember。

我需要使用三个不同的JSON数据集，这些数据集在数据库中更新得相当频繁。为了使移动应用程序能够离线工作，我将不得不存储JSON数据，并在数据库更改时更新它们。

1. 我如何从另一个服务器(CORS阻塞)检索JSON ?
2. 如何在设备上保存检索到的JSON ?[HTML5 LocalStorage(首选)或FileAPI]
3. 如何读取JSON文件和发送数据作为模型模板?(我猜Ember.$.getJSON可以做到这一点)

欢迎任何帮助。谢谢!

更新1

1. 因为我在使用Ember-data时遇到了很多问题，我没有在我的应用程序中使用它。
2. 找到使用ajax的跨域链接

更新2

CORS只能通过JSONP或通过在服务器响应中设置ACCESS-CONTROL-ALLOW-ORIGIN来解决(我尝试了许多其他解决方案，都失败了)

由于api在我的服务器上，所以我使用了后者。

对于2和3，我想我可以用这个问题

Answer 1

我的发现如下:

1. 来自不同域服务器的JSON数据无法从其他域的服务器读取JSON数据。这是由于浏览器中实现了同源策略。浏览器将检索您的JSON，但不允许您访问相同的。对于这个问题，有两种解决方案:

   • 使用JSONP -我不打算进入细节，但有很多可用的链接。

   • 允许CORS从服务器 -当服务器发送JSONified数据，你可以为ACCESS-CONTROL-ALLOW-ORIGIN添加额外的头。从服务器检索JSON后，浏览器检查该报头是否阻止或允许CORS。我使用了一些装饰器来添加crossdomain头，然后我的数据在浏览器中成功读取。

2. 保存json数据HTML5让一切变得更容易。在javascript中，你只需要使用:

   localStorage["application.state.data"] = JSON.stringify(json);
   

   或

   localStorage.setItem("application.state.data", JSON.stringify(json));
   

3. 检索工作相同

   var data = JSON.parse(localStorage["application.state.data"]);
   

   或

   var data = JSON.parse(localStorage.getItem("application.state.data"));