移动HTML5应用程序本地存储 [英] Mobile HTML5 Application Local Storage

问题描述

快速概述我拥有的内容以及与之相关的问题。我有一个HTML5应用程序，我将使用PhoneGap作为本机应用程序运行。它是当地野外研究站的小型数据收集应用程序。

A quick overview of what I have, and the problems that are associated with it. I have a HTML5 app that I am going to run as a native app using PhoneGap. It is a small data collection application for the local field research station.

这个现场工作站的问题是他们很容易丢失信号来传输数据;因此，我想将数据存储在设备上供以后使用（或将其发送到服务器）。

The problem with this field station is that they are prone to loosing a signal to transmit data; thus I want to store the data on the device for later use (or to send it to a server).

需要保存的数据如下：

*User Name (string)
*Transect Color (string)
*Transect Number (int)
*Transect Board (char)
*Salamander Name (string)
*Snount-Vent Length (int)
*Total Length (int)
*Centipedes (int)
*Red-Black Millipedes (int)
*Brown Round Millipedes (int)
*Brown Flat Millipedes (int)

该应用程序本身将是一个独立的应用程序，所以我希望它有办法保存数据。

The app itself will be a standalone app, so I want it to have a way to save the data.

使用jQuery和amp;组合的最佳方法是什么？ HTML5？我知道Web SQL已被弃用，但我相信这可能是我存储这些数据的唯一方法。如果没有，在发送之前动态存储X个条目的最佳方法是什么？

What would the best way of doing this be, using a combination of jQuery & HTML5? I know Web SQL is deprecated, but I believe that may be my only way of storing this data. If not, what would be the best way to dynamically store X number of entries before sending?

感谢您的帮助。

编辑：

这种情况怎么样，当研究人员必须做一个全部变换...

How about this situation, when the researcher has to do a "Full Transect"...

研究人员必须从一个地方到另一个地点，直到完成每个样线的20个完整数据收集。这需要20个不同的位置，每个位置都要输入不同数量的蝾螈和小动物。

The researcher must go from location to location until 20 full data collections on each transect had been done. This entails 20 different locations, each with a varying number of salamanders and critters to be entered.

如何存储更大的数据集，以便在结束，当 localstorage 只允许Key：Value对？

How would you store that much larger set of data, to be offloaded at the end, when localstorage only allows for Key:Value pairs?

推荐答案

我非常喜欢在迷你键值商店中包装 localStorage ：

I'm a huge fan of wrapping localStorage up in a mini key-value store:

window.storage = {
  store:localStorage,
  get: function( key ) {
    try {
      return JSON.parse(this.store[key]);
    } catch(e) {};
    return undefined;
  },
  set: function( key, value) {
    try {
      this.store[key] = JSON.stringify(value);
    } catch(e) {};
  }
}

这使您可以参考 window.storage 直接。假设您将描述的字段包含在名为 row 的哈希中，您现在可以直接序列化：

This enables you to reference window.storage directly. Assuming you have the fields described wrapped up in a hash called row, you can now serialize directly:

storage.set('myrow', row);

因为您存储在行中的数据将会要序列化，您可以创建一个文档，其中包含的信息比单个SQL行可能包含的信息要多得多：

As the data you store in row will be serialized, you could create a document that contains much more information than a single SQL-row might:

var document = {
  property: 'foo',
  nestedArray: [ 'foo', 'bar', 'baz' ],
  nestedObj: { 'key': 'foo', 'key2': 'foo' }
}

storage.set('transectID', document);

...你明白了。关键是你甚至可以通过 JSON.stringify 减少非常丰富的数据并以可恢复的形式保存。

...you get the idea. The point is that you can even very rich data will be reduced by JSON.stringify and saved in a recoverable form.

这篇关于移动HTML5应用程序本地存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！