HTML5: 本地缓存
实现前端缓存,除了自己创建js保存(參考:http://blog.csdn.net/clementad/article/details/46807641)。还能够利用html5的storage方法。
HTML5 提供了两种在client存储数据的新对象:
- localStorage:没有时间限制的数据存储,在同一个浏览器中,仅仅要没被手动清理,第二天、第二周或下一年之后,数据依旧可用。
- sessionStorage:针对一个 session 的数据存储。针对一个 session 进行数据存储。当用户关闭浏览器窗体后,数据会被删除(并且仅仅在当前窗体有效)。
<body> <h2>在client存储数据</h2> <p>HTML5 提供了两种在client存储数据的新方法:</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博客。)