title: LocalStorage of RNG Image
body: <p>I have created a random number generator connected to an array of images, one of these images are shown randomly to the user when they load the page. </p>
  
  <p>I'm struggling to figure out how to put one of these images in local storage so the same image does not appear when they reload the page, I just do not know how to do it.</p>
  
  <p>Here is my JSFiddle if you need it, I don't know how to show the images on these though I hope that doesn't cause issues: <a href="https://jsfiddle.net/Syystole/10mxjs9v/4/" rel="nofollow noreferrer">https://jsfiddle.net/Syystole/10mxjs9v/4/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;img src="" width="305" height="312" id="myPicture" alt="some image"&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>window.onload = choosePic; // Run Function When Website Runs
  var myPix = new Array("./images/service2.png","./images/service3.png","./images/service4.png"); //Array of 3
  
  function choosePic() {
      randomNum = Math.floor((Math.random() * myPix.length)); //Random Number Generator based on the number of pictures in array
      document.getElementById("myPicture").src = myPix[randomNum]; //Random Number with image is set in HTML
  }
  </code></pre>