title: Stop Page Refreshing - Persist Page-Data After Page-Refresh
body: <p>I am using the following code in my html file. I want to change an image after a time interval, it run successfully but when i refresh the page it run the initial page. what i want is the same image is loaded so on and so forth !! </p>
  
  <p>Anybody can help me?</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          #wss {
              opacity: 0;
              webkit-transition:opacity 1.0s linear 0s;
              transition:opacity 1.0s linear 0s;
          }
      &lt;/style&gt;
      &lt;script&gt;
          var wss_i = 0;
          var wss_array = ['&lt;img src="img/russia.jpg"&gt; &lt;/img&gt;', '&lt;img src="img/germany.jpg"&gt; &lt;/img&gt;', '&lt;img src="img/france.jpg"&gt; &lt;/img&gt;'];
  
          function wssNext() {
              wss_i++;
              wss_elem.style.opacity = 0;
              if (wss_i &gt; (wss_array.length - 1)) {
                  wss_i = 0;
              }
  
              setTimeout('wssSlide()', 1000);
          }
  
          function wssSlide() {
              wss_elem.innerHTML = wss_array[wss_i];
              wss_elem.style.opacity = 1;
              setTimeout('wssNext()', 9000);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
       &lt;h1&gt;My dog is &lt;span id="wss"&gt;&lt;/span&gt; &lt;/h1&gt;
  
      &lt;script&gt;
          wss_elem = document.getElementById("wss");
  
          wssSlide();
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>