Changing version numbers on window.reload()

Question

If I had the following <script> tag in my code:

<script src='http://your.site.com/js/big_script.js?version=1'></script>

How can I get this version number to automatically update with each subsequent window.reload() action placed on that page?

Page refreshes...

<script src='http://your.site.com/js/big_script.js?version=2'></script>

Page refreshes...

<script src='http://your.site.com/js/big_script.js?version=3'></script>

and so on... through use of JavaScript only?

I know localStorage would come in handy here but implementing it within the <script> tag itself? Is there a way of doing this, or are there alternative ways it could be done?

In this case I'm only after JavaScript based solutions only as the application is pure HTML5/JavaScript/CSS3.

Thanks in advance!

Answer 1

As you noted, localStorage is likely the way to go. The downside of doing this client side is that you'll have to late bind your script tag. I would try:

var my_site_cntr = parseInt(localStorage.getItem('mySite.counter')||0);
my_site_cntr++;
localStorage.setItem('mySite.counter', my_site_cntr);
var scrptElem = document.createElement("script");
    scrptElem.type = "text/javascript";
    scrptElem.src = "http://your.site.com/js/big_script.js?version=" + my_site_cntr;
    scrptElem.innerHTML = null;
document.body.appendChild(scrptElem);

Sources:

• dynamically change script src client-side
• Adding div element to body or document in javascript