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

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

＆＃13;

＆＃13;

$(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);
  }
});

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

<强>更新

此代码将在堆栈代码段中生成错误，因为它是沙盒环境。此代码段在网页上完美运行。

Answer 3

您可以使用localStorage或WebSQL来解决此问题

• 将图像添加为Base64，然后使用计数器1,2,3选择要使用的图像
  但这将使用JavaScript，因此它将在客户端
中加载
• 要转换图片Base64，您可以使用此website

您可以查看question

Answer 4

随机使用：

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