Is there any way to refresh the page only for specific times in jquery

Question

I am using jquery to reload a page with the below code

<script type="text/javascript">
  $(document).ready(function(){
       setInterval(function() {
              window.location.reload();
                }, 10000); 
  })
</script>

But i had some requirement, that i need to refresh the page only for 6 times, and display a message that "Something problem occurred"

So how to refresh/reload a page only for specific times(6 in my case) using jquery ?

Answer 1

Based on the comment of LShetty:

A basic example of using localStorage could be seen here http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/

E.g. something along the lines

<script type="text/javascript">
  $(document).ready(function(){
       var counter = localStorage.getItem('counter');
       if (counter == null) {
         counter = 0;
       }
       counter++;
       if (counter<=6) {
         localStorage.setItem('counter', counter);
         setInterval( function() {
                         window.location.reload();
                      }, 10000 );
       }
  })
</script>

Of course you could use a cookie for the same purpose, as you are going to store just a counter (way bellow the 4K limit of data stored in a cookie). For example you could utilize the createCookie and readCookie functions from the following article http://www.quirksmode.org/js/cookies.html

Answer 2

Just an idea: you can use query string to pass the counter between page refreshes. Something like this:

<script type="text/javascript">
  var counter = 0;
  $(document).ready(function(){
       counter = parseInt(getParameterByName("counter"));
       if(counter < 6){
       setInterval(function() {
              window.location.href = "http://" + window.location.host + window.location.pathname + '?counter=' + (counter + 1);
                }, 10000); 
       }
  })

//convenient method to get parameters from query string 
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>

Answer 3

what about this?

$(function(){
 if($('#sessioncounter').val() <= 6 ){
   setTimeout(function(){
    window.location = window.location;
   }, 6000);
 }
});

$('#sessioncounter').val() gives the counter value which you save in every load in the session. i dont know what kind of backend language you are using.. anyway, make a hidden field

<input type='hidden' id='sessioncounter' />

then save after each reload the counter into this field.

Answer 4

Using hash variables also works when it's an older browser without localstorage.

$(document).ready(function(){
        var count = parseInt(window.location.hash.replace('#',''))
        if(!count){
            count = 0;
        }
        count++;
        if(count < 7){
        setTimeout(function(){ window.location = 'http://'+window.location.hostname+window.location.pathname+'#'+count;}, 1000); 
        }
});