使用 Angular JS 的离线 Web 应用程序，Twitter Bootstrap

Posted 2023-03-08

【中文标题】使用 Angular JS 的离线 Web 应用程序，Twitter Bootstrap

【英文标题】：Offline Web App using Angular JS , Twitter Bootstrap

【发布时间】：2014-11-21 13:42:14

【问题描述】：

我是混合移动编程的初学者。

我们的要求是构建一个可以在笔记本电脑/台式机上运行的离线 Web 应用程序，并最终使用 PhoneGap 框架使该应用程序在平板电脑/智能手机上运行。

我们决定使用 AngularJS 、用于 UI 框架的 Twitter Bootstrap 和使用 .Net 作为 Web 服务器的 Rest API。

我们最关心的是网络应用在离线模式下要存储的数据大小。 html5 Web 存储有 5 MB 的限制，不推荐使用 HTML5 Web SQL 数据库。我们将使用 PhoneGap SQLLite 数据库在平板电脑/智能手机中进行离线存储。

我的问题如下：

1) 如何评估需要存储在 HTML5 Web Storage 中的数据库行（数据）的大小？

2) 假设数据大小超过 5MB，那么在离线模式下为 Web 应用存储数据的替代选项是什么？

【参考方案1】：

您应该查看 IndexDB，它允许您请求需要多少空间。有一个 shim 也可以在 WebSQL 上运行，以防万一您在 safari 上运行。

http://www.w3.org/TR/IndexedDB/

我可以使用信息http://caniuse.com/#feat=indexeddb

在电话间隙下，我不确定存储限制是否相同，但我不使用此功能，因此无法确认。但我怀疑这会限制设备在应用程序上的位置。

如果 PhoneGap 的 WebSQL 接口映射到 SQLLite 引擎并且不依赖于操作系统浏览器的实现，那么使用 IndexDB 将与 shim 一起工作，因此无需为设备编写特殊代码。 （不过我强烈建议尽早测试！）

【讨论】：

我将研究 indexedDB。但是，我想评估数据库中的数据大小是否远低于 5 MB。可以使用什么方法来查找存储在 HTML5 Web Storage 中的数据库中的数据是否消耗少于 5 MB 的存储空间。我是否要编写 POC，在 HTML5 Web Storage 中保存数据库行并找到数据大小，乘以最大数据行数？

别忘了，如果需要，您也可以使用压缩。

在决定选择 Offline Web Storage 之前，我想评估一下我们数据库中的数据大小。你能建议我这样做的方法吗？一旦我评估了数据的大小，我可以在需要时使用压缩技术。我的首选是使用 Web Storage。

最容易实现的是使用 JSON 并检查字符串长度。尽管这取决于您的日期，但这不一定是最佳解决方案。

我相信我需要编写一个程序来从数据库中获取数据，将其存储在本地存储中，然后使用 alert(1024 * 1024 * 5 - unescape(encodeURIComponent( JSON.stringify(localStorage))).length);

【参考方案2】：

我相信我需要编写一个程序来从数据库中获取数据，将其存储在本地存储中，然后使用 storage 评估存储的大小

 alert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);