实现前端缓存,除了自己创建js保存(参考:http://blog.csdn.net/clementad/article/details/46807641),还可以利用html5的storage方法。
HTML5 提供了两种在客户端存储数据的新对象:
- localStorage:没有时间限制的数据存储,在同一个浏览器中,只要没被手动清理,第二天、第二周或下一年之后,数据依然可用。
- sessionStorage:针对一个 session 的数据存储,针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除(而且只在当前窗口有效)。
<body>
<h2>在客户端存储数据</h2>
<p>HTML5 提供了两种在客户端存储数据的新方法:</p>
<ul>
<li>localStorage:没有时间限制的数据存储</li>
<li>sessionStorage:针对一个 session 的数据存储</li>
</ul>
<br>
<h2>localStorage的使用:</h2>
<p>localStorage存储的数据没有时间限制。在同一个浏览器中,只要没被手动清理,第二天、第二周或下一年之后,数据依然可用。</p>
<p>例子:你在本机使用本浏览器第 <span id="visitCount" class="highlight"></span> 次浏览本页面。</p>
<h2>sessionStorage的使用:</h2>
<p>sessionStorage针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除(而且只在当前窗口有效)。</p>
<p>例子:你在本次打开此窗口后,第 <span id="visitCountPerSession" class="highlight"></span> 次浏览了本页面。</p>
</body>
<script>
$(function(){
recordVisitCount();
recordSessionCount();
});
function recordVisitCount(){
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
} else {
localStorage.pagecount=1;
}
$("#visitCount").html(localStorage.pagecount);
}
function recordSessionCount(){
if (sessionStorage.pagecount) {
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
} else {
sessionStorage.pagecount = 1;
}
$("#visitCountPerSession").html(sessionStorage.pagecount);
}
</script>
运行结果如下:
(原创文章,转载请注明转自Clement-Xu的csdn博客。)