1 var useHash = false;  2     var hashExp = /#([0-9]+)/;  3       4     if(!history.pushState) {  5         useHash = true;  6     }  7       8     var link = document.getElementById(‘forward‘);  9     var num = document.getElementById(‘number‘); 10      11     //consolidate the update into one place 12     function handleStateChange(count) { 13         num.innerHTML = count; 14         document.title = ‘Number ‘ + count; 15         link.href = http://www.mamicode.com/‘?num=‘ + (parseInt(count,10) + 1); 16     } 17  18     function setNumFromUrl() { 19         if(location.search) { 20              21             var match = location.search.match(/num=([0-9]+)/); 22             if(match) { 23                  24                 //if pushState doesn‘t work, we need to  25                 //scrub the query string and redirect to the hash version 26                 if(useHash) { 27                     location = ‘history.html#‘ + match[1]; 28                      29                 } else { 30                     handleStateChange(match[1]); 31                 } 32             } 33              34         }else if (location.hash) { 35              36             var match = location.hash.match(hashExp); 37              38              39             handleStateChange(match[1]); 40              41             //if the user can use push state, but came with a hash url,  42             //we can upgrade the url with replaceState. 43             if(!useHash) { 44                 history.replaceState({count:match[1]}, null,  45                             ‘history.html?num=‘ + match[1]); 46             } 47              48         } else { 49             handleStateChange(1); 50         } 51     } 52      53     link.addEventListener(‘click‘, function(e) { 54         var myNum; 55          56         e.preventDefault(); 57         myNum = parseInt(num.innerHTML, 10); 58         myNum++; 59          60         if(useHash) { 61              62             location.hash = myNum; 63              64         } else { 65              66             history.pushState({count:myNum}, null, ‘?num=‘ + myNum); 67              68         } 69          70         handleStateChange(myNum); 71          72     }); 73      74      75     if(!useHash) { 76          77         //this is the lightweight bversion 78         addEventListener(‘popstate‘, function(e) { 79             if( e.state && e.state.count ) { 80                 handleStateChange(e.state.count); 81             } else {             82                 setNumFromUrl();             83             }         84         }); 85          86     } else { 87          88         //because the first popstate isn‘t called, 89         //we need to call this manually 90         setNumFromUrl(); 91          92         //we need to know the old value 93         //to be able to see if ti changed 94         var oldHash = location.hash; 95          96         //poll every 100ms 97         window.setInterval(function(){ 98  99             var match;100             101             if( window.hash !== oldHash ){102                 match = location.hash.match(hashExp);103                 oldHash = location.hash;104                 if(match) {105                     handleStateChange(match[1]);106                 }107                 108             }109             110         }, 100);111     }