大佬教程收集整理的这篇文章主要介绍了html5 web数据存储，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
客户端数据存储@H_502_9@
html5前，客户端数据存储主要依靠cookies,但是cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。为此，html5中提供了两种新的方法：
1.localStorage： 没有时间限制的数据存储
2.sessionStorage： 针对一个session的数据存储
在 html5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。数据以 键/值 对存在,web网页的数据只允许该网页访问使用。html5 使用 JavaScript 来存储和访问数据。
1.支持：IE8+，firefox，chrome，opera，safari都支持web存储
if(typeof(StoragE)!=="undefined"){ // Yes! localStorage and sessionStorage support! // Some code..... }else{ // Sorry! No web storage support.. }
localStorage对象@H_502_9@
数据可以长时间存储
我们知道，web存储是以键值对的形式保存的。在上面的例子中，key值为lastname,value值为Smith。通过key值，可以直接找到对应的value值 sessionStorage对象@H_502_9@@H_502_9@
sessionStorage是针对一个session进行数据存储的。我们知道，session有自己的生命周期，它是在服务器中创建的，而当我们关闭浏览器的时候session也会在服务器上被删除。它的用法与上面的localStorage大同小异
实例@H_502_9@@H_502_9@
1.localStorage实例
2.sessionStorage实例<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last NAME: " + localStorage.lastName);
</script>
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write("Last NAME: " + sessionStorage.lastName);
</script>
<!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>
<!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>
以上是大佬教程为你收集整理的html5 web数据存储全部内容，希望文章能够帮你解决html5 web数据存储所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。