html5 的存储

  html5提供了很多存储的功能,诸如localStorage,sessionStorage,indexedDB,还有离线缓存等,本次主要介绍离线缓存跟本地存储。

 离线缓存

 使用离线存储可以缓存部分文件在本地,当网络断开的时候还可以照常使用,这个需要一个配置文件,一般这么写:

< html manifest="test.manifest">

  然后你需要在你的文件test.manifest文件里面定义那些内容是需要缓存的,那些是不可以缓存的,(以下代码是从http://www.cnblogs.com/xqhppt/p/4157862.html copy的)

 1 CACHE MANIFEST
 2 #上面一句必须
 3 #v1.0.0
 4 #需要缓存的文件
 5 CACHE:
 6 a.js
 7 b.css
 8 #不需要缓存的文件
 9 NETWORK:
10 *
11 #无法访问页面
12 FALLBACK:
13 404.html

值得一提的是缓存的文件是不能使用通配符的,必须一个一个的写出来,然后就可以尝试拔网线了,哈哈。

locastrage

这个大家应该用的比较多了,其实很简单,主要就是getItem,setItem,clear等方法,值得一提的事在同源的页面下,locastrage是共享的,同时有一个叫onstorage的事件,额,这个ie跟其他浏览器有点区别,因为ie的这个事件是在document上的,其他的浏览器在windows上面,看个例子:

1  window.onstorage=function(e){
2         console.log(e.key+"-"+ e.newValue+ "-"+e.oldValue)
3 }

然后,我同时打开两个页面,在其中一个页面上直接设置一个新的key叫testNewKey,于是我打印出如下结果:

testNewKey-testNewKey-new-null

我在修改他的值,得到如下结果:

testNewKey-testNewKey-new2-testNewKey-new

哈哈,这个东西可以做同源页面不同窗口的通讯使用,目前项目中尚未用到,不过确实很棒的东西,这个比postmessage好玩一点(postmessage支持自己内部的iframe,自己打开的页面,打开自己的页面,用一个自称萝卜的人的说法,自己的孩子,自己的爹,还有肚子里的孩子可以使用postmessage,onstrorage可以支持兄弟的),至于getItem,setItem,removeItem之类的不想在此博客重复了,这个太基本了,就键值对保存。

  最后,值得一提的就是localStorage是有容量限制的,有的浏览器是10M,有的是5M(针对同一个域名,即一个源),这个可以通过try-catch语句去检测是不是已经满了,满了再去存储会报错,这个报错可以catch到的,不过一般的应用很难用完吧,10M的字符串,基本不会用完的。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。