localStorage本地存储 实现网站访问计数器

此代码仅供参考

---

代码说明

HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过JavaScript来获取这些数据。
在Chrome4以下版本或者Firefox等不支持Web Storage的浏览器中，有个模拟实现方式，即使用名为gear的javascript库来实现相同的功能。先导入gear.js,然后使用getItem()以及setItem()进行值的存取。

---

html代码(一)

<script type="text/javascript"> window.onload = function() { var visits = localStorage.getItem('visits'); if (visits) { localStorage.setItem('visits', Number(visits) + 1); } else { localStorage.setItem('visits', '1'); } document.getElementById('webcounter').innerHTML = '这是你第 ' + localStorage.getItem('visits') + ' 次访问本页面'; } </script> <div id="webcounter"></div>

---

html代码(二)

<script type="text/javascript"> window.onload = function() { var visits = localStorage.getItem("visits"); if (visits == null) { visits = 1; } else { visits++; } localStorage.setItem("visits", visits); document.getElementById("webcounter").innerHTML = "这是你第 " + visits + " 次访问本页面"; } </script> <div id="webcounter"></div>

---

html代码(三)

<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("我的历史访问次数: " + localStorage.pagecount + " 次."); </script>

---

代码演示

---

---