Salvataggio e caricamento di un’immagine da localStorage

Quindi, in sostanza, sto cercando di salvare un’immagine in localStorage e quindi caricare la stessa immagine nella pagina successiva.

Mi sono imbattuto in questo grande esempio: http://jsfiddle.net/8V9w6/

Anche se, non ho assolutamente idea di come funzioni dal momento che ho sempre usato localStorage per stringhe estremamente piccole.

Ho un’immagine che viene modificata tramite un caricamento di file gestito da jQuery

 Banner Image 

Il link jsfiddle che ho aggiunto sopra consente il caricamento di più file e questo è sicuramente qualcosa che non mi piacerebbe avere.

Quello che devo sapere è che cosa dovrei posizionare sulla prima pagina per salvare l’immagine, e cosa dovrei posizionare sulla seconda pagina per caricare l’immagine?

Ho un pulsante save che elaborerà tutto.

Qualcosa come questo ?

 var img = new Image(); img.src = 'mypicture.png'; img.load = function() { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var data = context.getImageData(x, y, img.width, img.height).data; localStorage.setItem('image', data); // save image data }; 

Ottieni il localStorage sulla seconda pagina; prova qualcosa come questo:

 window.onload = function() { var picture = localStorage.getItem('image'); var image = document.createElement('img'); image.src = picture; document.body.appendChild(image); };