使用远程JSON填充HTML5本地存储

Question

我正在尝试制作一个简单的CRUD电话目录Web应用程序，用户可以在其中从网络服务器（在线）将一个小的电话目录（例如公司）下载到该应用程序，然后通过CRUD（包括脱机时）为此制作自己的版本。 。 我只是在学习，因此（在此阶段）我对将这些更改同步回服务器并不十分感兴趣。

我发现这个关于如何使用HTML5本地存储和JS创建CRUD数据库的非常有用的教程：

http://mrbool.com/creating-a-crud-form-with-html5-local-storage-and-json/26719

但是，我无法工作如何首先使用从Web服务器下载的JSON数据填充此数据库。

这个想法是，用户可以在线时选择他们的公司（例如从下拉列表中选择），然后将电话目录的JSON下载到本地存储数据库，然后可以在本地进行编辑。

如果有人能帮助我指出正确的方向，我将不胜感激。 谢谢

Answer 1

为了将对象保存在localStorage或sessionStorage中，需要将对象转换为字符串。 然后，当您检索数据时，将其变成一个对象。

这是我为此写的两个原型：

Storage.prototype.setObject = function(key, value) {
  this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
  var value = this.getItem(key);
  if (value == undefined) return [] ;
  return value && JSON.parse(value);
}

用法：

var obj1 = {a:234, b:456};
localStorage.setObject('obj1', obj1);

console.log(localStorage)    // it's in there


var obj2 = localStorage.getObject('obj1');
console.log(obj2)           // got it back

Answer 2

看看store.js。 这非常简单，它抽象了解析JSON或将其字符串化的过程。

https://github.com/marcuswestin/store.js/

这是一个示例用法

// Store 'marcus' at 'username'
store.set('username', 'marcus')

// Get 'username'
store.get('username')

// Remove 'username'
store.remove('username')

// Clear all keys
store.clear()

// Store an object literal - store.js uses JSON.stringify under the hood
store.set('user', { name: 'marcus', likes: 'javascript' })

// Get the stored object - store.js uses JSON.parse under the hood
var user = store.get('user')
alert(user.name + ' likes ' + user.likes)

// Get all stored values
store.getAll().user.name == 'marcus'

// Loop over all stored values
store.forEach(function(key, val) {
    console.log(key, '==', val)
})