html5 的存储

浏览数：23 / 时间：2015年06月09日

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

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

html5 的存储