移动 HTML5 应用本地存储答案

【问题标题】：Mobile HTML5 Application Local Storage移动 HTML5 应用本地存储
【发布时间】：2014-08-08 18:36:45
【问题描述】：

快速概述我所拥有的以及与之相关的问题。我有一个 HTML5 应用程序，我将使用 PhoneGap 作为本机应用程序运行。它是当地实地考察站的小型数据采集应用程序。

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

需要保存的数据如下：

*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)

应用程序本身将是一个独立的应用程序，因此我希望它能够保存数据。

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

感谢您的帮助。

编辑：

这种情况怎么样，当研究人员必须做一个“全横断面”时......

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

当localstorage 只允许键值对时，您将如何存储这么多数据集，以便在最后卸载？

【问题讨论】：

您似乎并不真的需要数据存储的 SQL 部分来存储一些数据。 localStorage 活得很好，即使在 IE 中也是如此。
我也会去localStorage，但FWIW在许多实现中“非常慢”，包括Chrome code.google.com/p/chromium/issues/detail?id=94382

标签： javascript html local-storage web-sql indexeddb

【解决方案1】：

我非常喜欢将 localStorage 包装在一个迷你键值存储中：

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 的哈希中，您现在可以直接序列化：

storage.set('myrow', row);

由于您存储在row 中的数据将被序列化，您可以创建一个document，其中包含比单个SQL 行可能更多的信息：

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

storage.set('transectID', document);

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

【讨论】：

是的。我更新了我的解释，对基于文档的存储的可能性进行了更广泛的处理（听起来这可能是更适合您的解决方案？）
我不是 javascript 忍者，但我确信 window 是一个只读变量，您不能将其等同于数组，要编辑答案并将其更改为其他内容
它不是只读的作为作用域局部变量（例如在函数中）。你永远不应该编辑别人的答案。您可以发表评论或提供更好的答案。也许联系作者并要求他改进他的答案。

【解决方案2】：

例如：

var data = {
  name: 'x',
  transect_color: 'red'.
  .....
  ..
};

localStorage.setItem('mydata', JSON.stringify(data));  // mydata is the name of storage

要获取数据，您可以尝试如下：

var temp = localStorage.getItem('mydata');

if(temp != null) {
  var dataJSON = JSON.parse(temp);
}

如果你想清除你的 localStorage 数据，那么用户如下：

localStorage.clearItem('mydata');

您可以存储多个数据，如下所示：

var x = [];  // take an array to store all data

x.push({a: 'x', b: 'y'});

localStorage.setItem('mydata', JSON.stringify(x));

// for further entry

var temp = JSON.parse(localStorage.getItem('mydata')); // retrieve localStroage item

temp.push({a: 'xx', b: 'yy'})  // push new data to array

localStorage.setItem('mydata', JSON.stringify(t)); // overwrite the existing entry with new data

console.log(JSON.parse(localStorage.getItem('data'))); // you will see your all data here

【讨论】：

【解决方案3】：

将大型数据集存储在localStorage 中不是一个好主意。

WebSQL 已弃用。 IndexedDB 是较大的浏览器内数据集的首选工具，但在 PhoneGap 中尚不可用（尽管它应该在路线图上）。

与直觉相反，尽管 WebSQL 规范不会进一步开发 WebSQL is still the most widely supported 选项，而 IndexedDB 仍处于初期阶段。

如果您使用 localStore 路由，就像使用移动设备一样，您应该尽可能信任内存中的表示，并且只有在无法从内存中读取时才从“磁盘”中读取。

【讨论】：