每次用户重新访问页面时，如何在 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

您也可以直接从链接下载。然后将画布上下文保存到本地存储中。

How to save and load HTML5 Canvas to & from localStorage?

Answer 2

使用随机：

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

Answer 3

你可以使用localStorage或者WebSQL来处理这个问题

• 将图像添加为Base64，然后使用计数器 1、2、3 选择要使用的图像
  但这将使用JavaScript，因此它将被加载到客户端
• 要转换图像Base64，你可以使用这个website

你可以查看这个question

Answer 4

您所要做的就是使用两个变量，一个用于存储图像数组，另一个用于存储当前显示的索引。

$(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>

更新

此代码将在堆栈 sn-p 中产生错误，因为它是沙盒环境。这个 sn-p 在网页上完美运行。