HTML5: 本地緩存
阿新 • • 發佈：2017-05-30
rgb col cal java 關閉瀏覽器 height else tco ()
執行結果例如以下：
實現前端緩存，除了自己創建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博客。）
HTML5: 本地緩存