Местное хранилище с изображениями

Question

Я хотел бы сохранить URL-адрес изображения в localalstorage html5, а затем хотел бы установить это изображение на веб-странице, а также установить ссылку на другую веб-страницу (эта ссылка также находится в localStorage)сделать это

Обновление1: возможно ли без base64?

Answer 1

Да, вы делаете это неправильно!

Вам нужно что-то подобное, используя изображение в 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>

Соответствующий элемент HTML-изображения:

<img id="hero-graphic" alt="Blog Hero Image" src="" / >

Answer 2

Я считаю, что в настоящее время единственный надежный способ хранения двоичных данных в localStorage - это сохранение строки в кодировке base64. Но вы должны помнить, что localStorage ограничен, и изображения могут быть тяжелыми (а base64 делает их тяжелее).

Полагаю, вы пытаетесь кэшировать свои изображения. Почти во всех случаях было бы лучше просто правильно установить заголовки http, чтобы браузер делал всю грязную и утомительную работу за вас. Поверь мне, это намного лучше.