Хранить изображения в HTML5 local Storage onClick

Question

В настоящее время я создаю приложение в качестве побочного проекта, используя jQuery Mobile & PhoneGap. Это приложение будет показывать несколько изображений и дает пользователю возможность любимому изображению, которое ему нравится. Как только пользователь нажмет на кнопку в избранное изображение, это изображение будет отображаться на странице избранных (favorite.html). У меня возникла проблема с использованием локального хранилища для включения этой задачи. Можно ли хранить и извлекать изображения на другую страницу? Любая помощь будет отличной. Ниже приведена ссылка на мой jsfiddle, если вам нужен визуальный.

JSFiddle Demo

<!-- Page One --> 
     <div data-role="page" id="one"> 
     <div data-role="header"> 
      <h1>Page 1</h1> 
      </div> 
      <div data-role="main"> 
       <img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" style="width: 100px;"/> 
       <br /> 
       <button id="favcat">Click Here to Favorite Cat Image!</button> 
       <br /> 
       <br /> 
       <img src="http://www.dogslovewagtime.com/wp-content/uploads/2015/07/Dog-Pictures.jpg" style="width: 100px;" /> 
       <br /> 
       <button id="favdog">Click Here to Favorite Dog Image!</button> 

      </div> 
</div> 

      <!--Page Two --> 
      <div data-role="page" id="two"> 
     <div data-role="header"> 
      <h1>Page 2: Stored and Retrieved Images Display On This Page Once Clicked</h1> 
       </div> 

      <div data-role="main"> 


      </div> 
</div> 

Answer 1

Сначала вы должны определить, какие изображения должны быть сохранены, вы можете увидеть пользовательский атрибут-имя данных изображения называется и другим для кнопки называется дата-изображений, и имеют одинаковое содержание:

<!-- Page One --> 
      <img data-name="catImage" src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" style="width: 100px;"/> 
      <br /> 
      <button class="btn-add-image" data-image="catImage">Click Here to Favorite Cat Image!</button> 

Теперь, когда пользователь нажимает на кнопку изображения, сначала вы должны получить изображение:

var myImageName = $(this).attr("data-image"); 
var myImage = $('img[data-name="' + myImageName + '"]'); 

После вы должны получить строку изображения base64

//Create a Canvas 
var myCanvas = document.createElement("canvas"); 

//Set width and height 
myCanvas.width = myImage.width(); 
myCanvas.height = myImage.height(); 

//Draw imagem 
var myContext = myCanvas.getContext("2d"); 
myContext.drawImage(myImage, 0, 0); 

//And finally get canvas64 string 
var base64 = myCanvas.toDataURL("image/jpeg"); // if it's a png uses image/png 

А теперь сохранить его на LocalStorage:

localStorage.setItem("image", base64); 

И теперь восстановить на второй странице - стр два HTML:

<!--Page Two --> 
    <div data-role="page" id="two"> 
     <h1>Page 2: Stored and Retrieved Images Display On This Page Once Clicked</h1> 
    </div> 

    <div data-role="main" id="restoredImage"> 

    </div> 

Страница 2 JavaScript:

$(document).ready(function() { 
    var img = document.createElement("img"); 
    img.src = localStorage.getItem("image"); 
    $("#restoredImage").html(img); 
}); 

Answer 2

Другая идея заключается в использовании только Vanilla JS

Страница один - экономить на LocalStorage:

var img = new Image, 
canvas = document.createElement("canvas"), 
ctx = canvas.getContext("2d"), 
src = "http://example.com/image"; // insert image url here 

img.crossOrigin = "Anonymous"; 


canvas.width = img.width; 
canvas.height = img.height; 
ctx.drawImage(img, 0, 0); 
localStorage.setItem("savedImageData", canvas.toDataURL("image/png")); 

Page два - к выздоровлению от LocalStorage:

localStorage.getItem("savedImageData") 

JSBin пример: https://jsbin.com/hewapewoxe/edit?html,js,console