html5 web数据存储
客户端数据存储
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>
- HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
- HTML5客户端数据存储Web Storage——localStorage与sessionStorage
- HTML5----Web Storage存储web数据
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- html5 web客户端数据存储
- HTML5的数据存储之Web Sql
- HTML5客户端数据存储Web Storage——localStorage与sessionStorage
- HTML5客户端数据存储机制Web Storage和Web SQL Database
- Html5 Web数据存储,及Input表单及相关属性
- 临时存储页面上的数据---HTML5 Web存储
- HTML5客户端(Web)数据存储,localStorage与sessionStorage
- HTML5-桌面式web应用-数据存储
- Html5本地存储之Web SQL&nbsp…
- HTML5的web存储
- HTML5数据存储
- HTML5 使用 JavaScript 来存储和访问数据。
- HTML5几种存储方式 localstorage sessionstorage application cache Web SQL IndexedDB
- HTML5学习(4) 数据的存储(localStorage,sessionStorage)
- HTML5 在客户端存储数据
- HTML5数据存储方案data-*与jQuery数据存储方案$.data()的区别