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的字符串,基本不会用完的。