实现前端缓存,除了自己创建js保存(参考:http://www.voidcn.com/article/p-epxfolzd-gw.html),还可以利用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>
运行结果如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。