1

Hard to explain in the title, let me explain.

I have 3 images and I would like them to be displayed in a div and rotate everytime a user re-visits the page (They will see one image when they visit, and a different image the next time).

I was thinking of having a variable like 'count' which increments each time the user visits, and the value of count would relate to which image is displayed in this div, however I'm not sure how to save the 3 images in the local storage.

I'm expecting the logic wpould be like

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

count = count + 1

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

I guess my question is:

Is there a way to store images in the local storage without first adding them to the page?

EDIT

This is now the code I'm using, however an image is not displayed, the div just displays the image location.

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

(Note this is inside a document.ready function)

Xander
  • 991
  • 1
  • 13
  • 32
  • 1
    Why do you need to save the images to `localStorage`? Couldn't you have them in the dom as a `image` tag, and use the data you get back from `localStorage` to tell you which to show? – Pytth Mar 29 '17 at 16:55
  • @Pytth I suppose I could, do you mean like hide them all and then have a count in local storage which defines which one to show?(Like if count = 1 img1.removeClass hide etc) Would you mind submitting a full answer? – Xander Mar 30 '17 at 13:13

4 Answers4

0

Yes. It is possible.

First, draw the image in a canvas:

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

You can also download it directly from a link. Then save the canvas context into the local storage.

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

Community
  • 1
  • 1
Amir H. Bagheri
  • 1,416
  • 1
  • 9
  • 17
0

All you have to do is use two variables, one to store an array of images and another to store the currently shown index.

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

UPDATE

This code will produce an error in the stack snippet as it is a sandboxed environment. This snippet runs perfectly on a web page.

Shakti Phartiyal
  • 6,156
  • 3
  • 25
  • 46
  • This return error Error { "message": "Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.", "filename": "http://stacksnippets.net/js", "lineno": 16, "colno": 17 } – Ahmed Essawy Mar 29 '17 at 17:05
  • Yes it will return error here as it is a sandboxed environment , run it on your page and check. If you gave me a downvote for this, its really your lack of knowledge.. – Shakti Phartiyal Mar 29 '17 at 17:06
  • This looks promising, I will try it out now and let you know how it goes. Thank you – Xander Mar 29 '17 at 17:14
  • Sure ask further if required – Shakti Phartiyal Mar 29 '17 at 17:15
  • Hi @ShaktiPhartiyal I've added the code but unfortunatley it just displays the file location of the image inside the div (here's a screenshot: https://gyazo.com/41e9a8ab776ca1b904b2ee9b2ccc498b) I've updated my question with the code and was wondering if you wouldn't mind having a look at it, thanks very much. – Xander Mar 29 '17 at 17:26
  • Hi @EthanBristow Please check the updated answer in the answer the code `` should be you image. I hope you get it. – Shakti Phartiyal Mar 29 '17 at 17:29
  • @ShaktiPhartiyal Thank you, I've tried that now but unfortunatley it still does the same, just displays the file location :/ my html is this
    and in my JS i select ('#advert')     – Xander Mar 29 '17 at 18:42
0

You can use localStorage or WebSQL to deal with this problem

  • Add image as a Base64 then use counter 1,2,3 to choose which image to use
    but this will be using JavaScript so it will be loaded in Client-Side
  • To convert image Base64 you can use this website

You can check this question

Community
  • 1
  • 1
Ahmed Essawy
  • 326
  • 4
  • 13
0

Use random:

Math.floor((Math.random() * 3) + 1);
b2ok
  • 544
  • 6
  • 13