据说HTML5的本地存储，但你知道吗，IE9这个旧浏览器用起来简直是折腾人，连localStorage都运行不了。想要用这些功能？那就上传项目试试看好了，千万别被它忽悠了！
你知道localStorage和sessionStorage区别吗？
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
聊到这两个存档功能，都是HTML5帮我们搞的本地存东西的小玩意儿。不过要说，虽然看起来像双胞胎，但实际上还有点儿小区别的。比方说，当你关掉网页后，SessionStorage里所有存的东西都会没了，但LocalStorage可就牛逼多了，无论你关几次浏览器，那里头的数据都毫发无损，稳得很呐！
manifest文件的作用
你可能不太清楚，那个叫Manifest文件的玩意儿，其实就像个小说明，告诉浏览器该怎么清缓存、留哪些缓存。说白了，就看这两块内容，一个是CACHEMANIFEST那部分，另一个就是NETWORK。
nbsp;HTML> ...
CACHEMANIFEST的缓存机制
别忘了缓存Manifest文件，有了它下次断网也不用怕，之前保存过的都还在真棒！
NETWORK的非缓存机制
别忘了上网查那个链接！得上网才能看得~网页可是不帮你存档的！断网了可就看不了了！
服务器上的manifest文件配置
CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html/ /offline.html
你得记得！把你家服务器上那个“manfiest”文件的MIME（媒体类型）类型改写成“text/cache-manifest”，这样客户端浏览器就知道怎么处理它，管起来也更轻松。
applicationCache对象的状态
manifest text/cache-manifest
你们知道appcache这个东西吗？它虽然小巧，但其实它的状态开关就像是个小哨兵，时时刻刻都能告诉我们缓存的情况，比如说「没有缓存」、「正在搜寻中」、「已经开始下」，或者是「已过期」等等。
应用缓存的更新触发机制
网上找应用升级包，就像逛超市挑东西，找到了新版本就是开始下载。这个过程和下电影、歌曲也类似，还会有个叫做”progress”的东西显示出来，有点像看电影时候的那个进度条。
manifest文件的更新问题
更新出问题别急，如果下不动，试下旧版呗。像网页编码变更了，不升级还真是看不见新功能！
你能告诉我在这个Manifest文件里这三个板块是怎么摆放的吗?
加油，缓存跟网络、备份这东西，放哪儿都行。但别忘了，咱们可有个规矩叫“先声明后使用”哟~
其他页面的缓存访问问题
只要网页还保存在你电脑里的缓存里，就能直接拿来用了！管它之前有没设过manifest属性，它都能给你找出来哒~
manifest文件改变时的资源请求更新问题
稍微挪动一下那manifest文件，仅仅改变一下路径，相关资源居然就会默默发生变化！原来只需要调整文件就能搞定资源请求。
离线缓存与浏览器缓存的区别
离线缓存可不仅仅只能装下单个文件，连整个应用都可以存到本地，随时随地想用就用！就算网络突然断掉，也别怕，你的应用还是照样能用；而浏览器缓存，就只能保存一个文件罢了。简单来说，有了离线缓存，我们就可以把喜欢的应用装进口袋里，浏览器缓存也就只是省点手机流量而已。
indexedDB的数据结构
别以为IndexedDB和我们平常用的多表数据库差不多，它可是通过objectStore来存东西的。每个database里面可以塞很多的objectStore，不管你要存什么类型的数据，统统没问题！
HTML5的本地存储你弄明白没？有啥新鲜事可以告诉大家不？赶紧在下面留言聊！别忘了给这篇文章点个赞，分享出去让更多人知道！
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法对应的五个参数分别为：数据库名称、版本号、描述文本、数据库大小、创建回调
评论0