html5 的存储

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

离线缓存

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

< html manifest="test.manifest">

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

 CACHE MANIFEST

 #上面一句必须

 #v1.0.0

 #需要缓存的文件

 CACHE:

 a.js

 b.css

 #不需要缓存的文件

 NETWORK:

 *

 #无法访问页面

 FALLBACK:

 404.html

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

locastrage

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

  window.onstorage=function(e){

         console.log(e.key+"-"+ e.newValue+ "-"+e.oldValue)

 }

然后，我同时打开两个页面，在其中一个页面上直接设置一个新的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 的存储

最新文章

热门文章