HTML5本地存储详解-优快云博客

本文介绍了HTML5中localStorage和sessionStorage两种本地存储方法的特点及应用。localStorage用于持久性存储，而sessionStorage则针对一个会话周期。通过示例展示了如何使用JavaScript进行数据的存储和读取。

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

Html5一共提供了两中在客户端储存数据的方法：

　　1：localStorage - 没有时间限制的数据存储

　　2:sessionStorage - 针对一个 session 的数据存储

当然，在这之前，这是都是由cookie来完成的，但是你有木有想过cookie并不适合大数据的储存，cookie由每个服务器的请求来传递数据，这使得Cookie的效率变得不高。而在HTML5中，数据不是由每个服务器传递的，而是在网站请求的时候才使用数据，这使得不影响的网站的性能下Web数据存储大数据成为可能。

　　当然，对于不同的网站，数据储存于不同的区域，而且你自能访问网站自身的数据。而HTML5则是使用Javascript来储存和访问数据。好了，我们下面开始演示第一个方法，

　　localStorage这种没有时间限制的数据存储方法。下面我们来创建和访问localStorage的一个实例

　　　　<!DOCTYPE HTML>
　　　　　　<html>
　　　　　　　　<body>
　　　　　　　　　　<script type="text/javascript">
　　　　　　　　　　　　　　localStorage.TestName ="samll";
　　　　　　　　　　　　　　document.write("Test name: " + localStorage.TestName);
　　　　　　　　　　</script>
　　　　　　　　</body>
　　　　　　</html>
我们存进去一个samll的名字，然后读取出来那么这个是不是真的有效呢，当网页执行一次后，你可以删除localStorage.lastname="samll";依然有效！

下面我们来一个实际一点的列子，我们做一个用户对页面的访问次数做一个记录

　　　　//判断用户是否对访问了这个网页
　　　　if (localStorage.pagecount){

　　　　localStorage.pagecount=Number(localStorage.pagecount) +1;

　　　　}

　　　　else{

　　　　localStorage.pagecount=1;

　　　　}

　　　　document.write("访问"+ localStorage.pagecount + " 次");

　　　下面为们讲解 sessionStorage，sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。所以需要注意了！！

　　　我们来创建并且访问一个sessionStorage的实例，同localStorage的方法并无些许差别

　　　　　<script type="text/javascript">
　　　　　　sessionStorage.sessName="Jike";
　　　　　　document.write(sessionStorage.sessName);
　　　　　</script>
　　　　镶嵌在网页上，出现Jike，关闭网页后，源码里边删除sessName,打开网页会出现undefined，说明不存在sessName，所以，要注意关闭浏览器数据被删除

　　　　既然讲解sessionStorage和localStorage的差别，我下面再来讲sessionStorage在网页的访问次数做一个记录进行分析

　　　　<!DOCTYPE HTML>
　　　　<html>
　　　　<body>
　　　　　　<script type="text/javascript">

　　　　　　//这里同样是判断页面是否是第一次访问
　　　　　　if (sessionStorage.pagecount)
　　　　　　{
　　　　　　　　sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　sessionStorage.pagecount=1;
　　　　　　}
　　　　　　　　document.write("访问" + sessionStorage.pagecount + ",在 sessionStorage的情况下");
　　　　　　</script>
　　　　　　<p>刷新页面一次，计数器+1 </p>
　　　　　　<p>请关闭浏览器窗口，然后再试一次，已经为=1。 </p>
　　　　　</body>
　　　　</html>