前端缓存技术与HTML5 storage应用-优快云博客

本文介绍如何利用HTML5的localStorage和sessionStorage在客户端存储数据，并通过JavaScript实现计数器功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现前端缓存，除了自己创建js保存（参考：http://blog.youkuaiyun.com/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>

运行结果如下：