Как работать с JSON Feed хранится в LocalStorage в приложении PhoneGap?

Question

Вот что я делаю,

Получить запрос на мой веб-сервер, ответ в json. Использование шаблонов jquery для визуализации данных обратного вызова в моем приложении. Довольно просто, работает как шарм.

Вот проблема: я хочу хранить некоторые из этих данных локально, чтобы моему приложению не приходилось каждый раз получать их с сервера (3g медленный, и каждая транзакция вредит моему UX ...). Итак, вот что я пытался:

$.ajax({
   url: app_domain + '/pages/home.json',
   type: 'get',
   datatype: 'json',
   data: { mobile: "1" },
   async: true,
   cache: false,
   success: function(data) {

       //store locally
       localStorage.setItem('foo', data);
       //grab from local store
       var bar = localStorage.getItem('foo');
       // populate template with data
       $.tmpl("cityTemplate", bar).appendTo('#all'); 

    ...

Это не удалось. (Я понимаю, что код глуп, просто для легкой отладки, пока я не заставлю его работать)

Если я сделаю простой

alert(foo);

после получения локально сохраненных данных я вижу что-то вроде

[object, Object],[object, Object],[object, Object],...,[object, Object]

если я сделаю

alert(foo[0])

я получаю

'['

если я сделаю

alert(foo[0].name);

я получаю

'undefined' 

Итак, я думаю, это вызвано тем, что формат данных изменяется с json на string при хранении через localStorage. Вы бы согласились? И, если да, что я могу сделать, чтобы вернуть его в формат JSON?

Спасибо за тонну!

Answer 1

Вам нужно использовать JSON так:

localStorage.setItem('foo', JSON.stringify(data));

И затем проанализировать его:

JSON.parse(localStorage.getItem('foo'))

Answer 2

App.local = (function () {
  var self = {};

  self.get = function (key) {
    var b = localStorage.getItem(key);
    return b ? JSON.parse(b) : null;
  }

  self.set = function (key, value) {
    var b = JSON.stringify(value);
    localStorage.setItem(key, b);
  }

  return self;
})();

Теперь у вас есть приятный интерфейс для локального хранилища,

var local = App.local;
local.set('foo', 'bar');
var bar = local.get('foo');
console.log(bar);