实现前端缓存，除了自己创建js保存（參考：javascript:void(0)）。还能够利用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>


执行结果例如以下：

HTML5: 本地缓存_html5