Как отобразить новое изображение в div, сохраненное в локальном хранилище, каждый раз, когда пользователь повторно посещает страницу?

Question

Трудно объяснить в названии, позвольте мне объяснить.

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

Я думал о том, чтобы иметь переменную, такую ​​как 'count', которая увеличивается каждый раз, когда пользователь посещает, и значение count будет относиться к тому, какое изображение отображается в этом div, однако я не уверен, как сохранить 3 изображения в локальном место хранения.

Я ожидаю, что логика будет такой

setItem (Img1)
setItem (Img2)
setItem (Img3)

count = count + 1

if count = 1
    div = getItem(Img1)
if count = 2
 etc etc

Я думаю, мой вопрос:

Есть ли способ хранить изображения в локальном хранилище без предварительного добавления их на страницу?

РЕДАКТИРОВАТЬ

Теперь это код, который я использую, однако изображение не отображается, div просто отображает местоположение изображения.

var counter = localStorage.getItem('counter');
  if(counter == null) {
    localStorage.setItem("counter", 0);
    localStorage.setItem("images",'["assets/advert1.png","assets/advert2.png","assets/advert3.png"]');
    $('#advert').html(JSON.parse(localStorage.getItem('images'))[0]);
  }
  else {
    $('#advert').html(JSON.parse(localStorage.getItem('images'))[counter]);
    counter++;
    if(counter > 2) {
      counter = 0;
    }

    localStorage.setItem("counter", counter);
  }

(Обратите внимание, что это внутри функции document.ready)

Answer 1

Да. Это возможно.

Сначала нарисуйте изображение на холсте:

https://www.w3schools.com/tags/canvas_drawimage.asp

Вы также можете скачать его прямо по ссылке. Затем сохраните контекст холста в локальном хранилище.

Как сохранить и загрузить HTML5 Canvas в локальное хранилище и из него?

Answer 2

Используйте случайное:

Math.floor((Math.random() * 3) + 1);

Answer 3

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

$(document).ready(function(){
  var counter = localStorage.getItem('counter');
  if(counter == null)
  {
    localStorage.setItem("counter",0);
    localStorage.setItem("images",'["1.png","2.png","3.png"]');
    $('#displayArea').attr("src",JSON.parse(localStorage.getItem('images'))[0]);
  }
  else
  {
    $('#displayArea').attr("src",JSON.parse(localStorage.getItem('images'))[counter]);
    counter++;
    if(counter > 2)
    {
      counter = 0;
    }
    localStorage.setItem("counter",counter);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="displayArea"></img>

ОБНОВИТЬ

Этот код выдаст ошибку во фрагменте стека, так как это среда с песочницей. Этот фрагмент отлично работает на веб-странице.

Answer 4

Ты можешь использовать localStorage или WebSQL для решения этой проблемы

• Добавить изображение как Base64 затем используйте счетчик 1,2,3, чтобы выбрать, какое изображение использовать
  но это будет использовать JavaScript поэтому он будет загружен в клиентской части
• Конвертировать изображение Base64 Вы можете использовать этот сайт

Вы можете проверить этот вопрос