Find solution
How to save an image in LocalStorage?

Localstorage with images

  • I would like to save an image url in the localstorage of html5 and then would like to set that image on a web page and also set a link to another webpage (that link addres is also in the localStorage) But how can I do that Update1: Is it possible without base64?

  • Answer:

    I believe, nowadays, the only reliable way to store binary data in localStorage - is to keep base64-encoded string. But you should keep in mind that localStorage is limited, and images can be heavy (and base64 makes them heavier). I guess you are trying to cache your images. It would be better in almost all cases just to set properly http headers, to let the browser do all the dirty and tedious work for you. Trust me, it is way better.

Dev1.developer at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

Yep you are doing it wrong! You need something like this using image in base64: <script> var hero; if (localStorage.getItem('heroImg')) { hero = localStorage.getItem('heroImg'); } else { hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7 /.../ 6p+3dIR//9k='; localStorage.setItem('heroImg', hero); } document.getElementById("hero-graphic").src = 'data:image/png;base64,' + hero; < /script> </script> The corresponding HTML Image element: <img id="hero-graphic" alt="Blog Hero Image" src="" / >

Omeid Herat

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.