html5 web数据存储-优快云博客

本文深入探讨HTML5客户端数据存储技术，包括localStorage和sessionStorage的使用方式、特点及浏览器兼容性问题，通过实例演示如何在网页中实现持久化存储。

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

客户端数据存储

html5前，客户端数据存储主要依靠cookies,但是cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。为此，html5中提供了两种新的方法：

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

2.sessionStorage：针对一个session的数据存储

在 html5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。数据以键/值对存在, web网页的数据只允许该网页访问使用。html5 使用 JavaScript 来存储和访问数据。

客户端浏览器支持

1.支持：IE8+，firefox，chrome，opera，safari都支持web存储

2.不支持：IE7及更早版本都不支持web存储

由于浏览器支持程度不同，因此在使用前要考虑浏览器兼容问题

if(typeof(Storage)!=="undefined"){
      // Yes! localStorage and sessionStorage support!
      // Some code.....
 }else{
      // Sorry! No web storage support..
 }

localStorage对象

数据可以长时间存储

<script type="text/javascript">
    localStorage.lastname="Smith";
    document.write("Last name: " + localStorage.lastname);
</script>

我们知道，web存储是以键值对的形式保存的。在上面的例子中，key值为lastname,value值为Smith。通过key值，可以直接找到对应的value值

sessionStorage对象

sessionStorage是针对一个session进行数据存储的。我们知道，session有自己的生命周期，它是在服务器中创建的，而当我们关闭浏览器的时候session也会在服务器上被删除。它的用法与上面的localStorage大同小异

<script type="text/javascript">
    sessionStorage.lastname="Smith";
    document.write("Last name: " + sessionStorage.lastname);
</script>

实例

1.localStorage实例

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
    if (localStorage.pagecount){
	localStorage.pagecount=Number(localStorage.pagecount) +1;
    }else{
	localStorage.pagecount=1;
    }
    document.write("Visits " + localStorage.pagecount + " time(s)");
</script> 
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>
</body>
</html>

2.sessionStorage实例

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
    if (sessionStorage.pagecount){
	sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }else{
	sessionStorage.pagecount=1;
    }
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script> 
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>
</body>
</html>

转载于:https://my.oschina.net/lgr6/blog/630844