PhoneGap: Storing/Retrieving Image Using LocalStorage

Question

I'm new to PhoneGap and I'm trying to create an application that will include a feature that will take a photo and store the file path(?) in local storage so that the image can then be retrieved along with other data. I know that local storage doesn't allow a user to store a large amount of data but for this app I'm just looking to use local storage only for now. Here is a dulled down version of my local storage saving the text data:

$(function () {
    $('[type=submit]').on('click', function (e) {
        userList.addUser(
            $('#name').val(),
            $('#address').val(),
            $('#message').val(),
        );
        $('input:text').val(''); 
        return false;
    });

    $('#users').on('click', '.delete', function (e) {
        userList.deleteUser(parseInt($(this).parent().find('.key').text()));
        return false;
    });

    $('#users').on('click', '.update', function (e) {

        var name = $(this).parent().find('.name').text(); 
        var address = $(this).parent().find('.address').text();
        var type = $(this).parent().find('.message').text();
        var key = parseInt($(this).parent().find('.key').text()); 
        userList.updateUser(name,address,message,key); 
        return false;
    });

    userList.open();

});

userList = {}; 

userList.open = function() {
    this.list = { }; 
    if (localStorage.userList) {
         this.list = JSON.parse(localStorage.userList);
    } 
    userList.getAllUsers(); 
};      

userList.addUser = function(name,address,message) {
console.log(arguments.callee.name, arguments); 
key = new Date().getTime();
this.list[key] = {
'name':name,'address':address,'message':message
};
localStorage.userList = JSON.stringify(this.list);
this.getAllUsers(); 
};

userList.getAllUsers = function() {
    $('#users').html('');
    for (var key in this.list) {
        renderUser(key, this.list[key]);
    }
};

userList.deleteUser = function(id) { 
    console.log(arguments.callee.name, arguments); 
    delete this.list[id];
    localStorage.userList = JSON.stringify(this.list); 
    this.getAllUsers(); 
};

userList.updateUser = function(name,address,message,key) {
console.log(arguments); 
this.list[key]['name'] = name; 
this.list[key]['address'] = address;
this.list[key]['message'] = message;
localStorage.userList = JSON.stringify(this.list);
this.getAllUsers();
};  

function renderUser(key,value) {
    console.log(arguments); 
    var li = '<li><span class="name" contenteditable="true">'+value.name+'</span> &nbsp; ';
    li += '<span class="address" contenteditable="true">'+value.address+'</span> &nbsp; ';
    li += '<span class="message" contenteditable="true">'+value.message+'</span> &nbsp; ';
    li += '<a href="#" class="update">[Update]</a> &nbsp; '; 
    li += '<a href="#" class="delete">[Delete]</a><span class="key">'+key+'</span></li>';
    $('#users').append(li);
}

...and here is the code I have that takes an photo and stores the photo in the users photo album...

var pictureSource;   
var destinationType; 

function onPhotoDataSuccess(imageData) {
      var smallImage = document.getElementById('smallImage');

      smallImage.style.display = 'block';

      smallImage.src = "data:image/jpeg;base64," + imageData;

    }

    function capturePhotoEdit() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL, saveToPhotoAlbum: true});
    }

    function onFail(message) {
      alert('Failed because: ' + message);

    }    

If anyone could shed some light on how I can retrieve an image by perhaps storing its file path along with some other text data I'd be extremely grateful! I've looked all over for a helpful tutorial but nothing seems to work out for my problem.

Thank you!! (PS. Sorry for this long post!)

Answer 1

var pictureSource;   
var destinationType; 
function onPhotoDataSuccess(imageData) {
  var smallImage = document.getElementById('smallImage');

  smallImage.style.display = 'block';

  smallImage.src = "data:image/jpeg;base64," + imageData;
  photo = "data:image/jpeg;base64," + imageData;
  localStorage.setItem('photo', photo);

}
function capturePhotoEdit() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail,
        {
            quality: 20,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
            encodingType: Camera.EncodingType.JPEG
        });
}

function onFail(message) {
  alert('Failed because: ' + message);

}