image capture to localStorage not retrieving image consistently

With help from this site (thanks Musa!), I've managed to get some code that allows the user to capture an image and places that in local storage. I'm using the code in an iAd Producer widget embedded in an iBook.

Because I want to use the widget in a few locations in the book, I need to uniquely key each image stored. When I attempt this however, I run into problems which I can't explain.

Here's the code:

<div id="zeroDiv">
<input type="file" id="getPic" accept="image/*">
</div>
<div id="picWrapper">
<img id="image">
<div id="buttDiv">
    <button id="picButt"><span class="buttText">Insert image</span>

    </button>
</div>
</div>

and

uniqueID = "FC-p1"; //this will vary each time the code is used

$(document).ready(function () {
$("#getPic").on("change", gotPic);
if (localStorage['url' + uniqueID]){
    $("#image").attr("src", localStorage['url' + uniqueID]);
    $("#picButt span").text("Change image");
}    
});

function gotPic(event) {
var reader = new FileReader();
reader.onload = function(){
    $("#image").attr("src", this.result);
    localStorage['url' + uniqueID] = this.result;
    $("#picButt span").text("Change image");
};
reader.readAsDataURL(event.target.files[0]);   
}

here's a fiddle that works just fine on the web: http://ift.tt/1ybtFVM

However, when I embed this into the ebook on the iPad I notice that when the page reloads I have strange behaviour. If an image is captured from the camera, this is replaced by the last image selected from the Camera Roll rather than the last image taken with the camera. I can't seem to find any consistency to this. Sometimes the image is replaced, sometimes the camera captured image remains.

Any ideas?