PhoneGap：使用 LocalStorage 存储/检索图像答案

【问题标题】：PhoneGap: Storing/Retrieving Image Using LocalStoragePhoneGap：使用 LocalStorage 存储/检索图像
【发布时间】：2017-04-27 19:22:30
【问题描述】：

我是 PhoneGap 的新手，我正在尝试创建一个应用程序，该应用程序将包含一项功能，该功能将拍摄照片并将文件路径（？）存储在本地存储中，以便随后可以与其他图像一起检索图像数据。我知道本地存储不允许用户存储大量数据，但对于这个应用程序，我现在只想使用本地存储。这是保存文本数据的本地存储的简化版本：

$(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);
}

...这是我拍摄照片并将照片存储在用户相册中的代码...

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

    }

如果有人能阐明我如何通过存储图像的文件路径以及其他一些文本数据来检索图像，我将非常感激！我到处寻找有用的教程，但似乎没有解决我的问题。

谢谢！！（PS。很抱歉这篇长文！）

【问题讨论】：

标签： javascript android cordova local-storage

【解决方案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);

}

【讨论】：