HTML5新功能挺有趣的！有个内置的本地存储API，就像个小秘书一样帮你管着数据，还有两个得力助手——localStorage和sessionStorage。你可以把重要资料塞进他们的“口袋”里，想用的时候随时拿出来，localStorage就像强壮些的大哥，能坚持好一段时间，除非你主动把它清空。
想要用户记住自己在网站上设的东西？直接用localstorage得了。至于只需要记住那些随手打的选区呀文本啦这样的选项，就算关了浏览器也没事，那sessionstorage就能搞定！
nbsp;HTML> ...
来，咱们聊聊LocalStorage跟SessionStorage到底是啥玩意儿，还有怎么用它们呗。
听说过LocalStorage和SessionStorage吗？很有用喔，比如你网购时没关网页，下次打开还有东西在购物车里。SessionStorage就是个临时存档区，主要用来看页面搜查记录这类暂时性的数据，不过要注意，这些资料只保留在当前浏览的那一页。
别搞不清，localStorage和sessionStorage之所以那么好用，都是因为有“同源策略”这个帮手。这就是说，只要在一个网站内，它们就能轻松交互管理数据！学习下JavaScriptAPI，读取和存取数据就像玩儿一样容易，真的好像给我们的数据加了层保险似的！
manifest文件的基本概念
CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html/ /offline.html
算了，说到HTML5，可别忘了讨论下离线缓存啊!那什么清单文件，其实就是一个小个子txt文档，专门通知浏览器该珍藏啥宝贝儿，把啥给扔了。这么一来，哪怕网络瘫痪了咱也不怕，离线应用照样能跑得欢啊!
捡破烂用的就是这个！网购的时候得要用到，别忘了下载。不过说到网络这事儿，要想用你就得连上Internet，可不能保存在本子或者手机里面哟~还有那个万能的救急招数，要是网速太慢或者网页打不开的时候，救急的部分就会跳出来给你提示了，比如说那什么404错误页面之类的。
manifest文件的配置和使用
想要manifest文件派上用场，只要动动服务器的设置就成。把mimetype改成text/cache-manifest简单得很，就在服务器设置里面搞定。那么，浏览器就可以按照你设定好的Manifest文件帮你自动保存所需信息了~
了解manifest文件，得牢记几个要点呀。第一，如果manifest和相关文件打不开的话，那就白费劲更新了，因为Browser还是会使用旧缓存滴。再有，Browser还会自动保存含有manifest的HTML文件，所以更新manifest文件时千万别忘了加上新的HTML内容，大家才能看到更新的网页！
离线缓存的状态和事件
浏览器更新还能玩这么多花样。看到那个”checking”吗?这是它在找新玩意儿，紧接着的”downloading”就是开始下载，然后的”progress”就是告诉你现在进展到哪儿了;最牛逼的是出现了“updateready”!那就是新东西下好喽！再看看下面，”cached”这个代表啥？告诉你，以后用这个应用可以随便搞离线操作！弄明白这些，我们就能轻松驾驭离线缓存啦～
简单地讲，离线缓存就是直接把整个APP放手机里存着，而浏览器缓存只管单个文件~就是说，即使你已经在手机上下载了那个文件的离线缓存，假如浏览器里有新版本的话，也还是会用新的那个哟~
WebSQL数据库API的介绍
虽然HTML5里没找到WebSQL数据库API，但是它这个独立的规范还是挺牛掰的，能直接用SQL操作客户端数据库！对处理大量数据的应用特别好用，查个信息改个数据啥的都省事儿多了。
Wow，这个WebSQL数据库api真是神器，搭建查找都弱爆了，删库操作也不在话下。虽说现在新浏览器用不了，但旧版还是可以的，超级给力！
WebSQL数据库API的实际应用
WebSQL数据库API真是超强大！我们做网盘上的记事本应用，塞满东西无压力，还可以自定义分类和整理方式。有了它，开发小程序再也不受主机内庞大数据库的困扰！简直是神助攻！
告诉你我今儿个学会个特给劲的玩意——好用到爆的WebSQL数据库API。这货能给你搞定各种数据包袱，万一出错了，整个链子就废了，数据就稳稳当当妥妥地在手里了！
总结与展望
这里有你想看的！HTML5对网页应用超级好用！比如那个LocalStorage和SessionStorage，学会了它们，你的站点肯定牛逼哄哄；还有那Manifest文件，弄好了网速能瞬间变快；最后别忘了WebSQLDatabaseAPI，处理复杂数据就靠它了！
var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);
科技发展太快了，说不定以后就能拿出更牛逼的存储和缓存技术！咱们这些做编程的得保持上进心，一直学下去，才能提供更好的服务哟～
快来聊聊你们平时做不做HTML5开发呀？要是想要体验下它那个神奇的本地存储和离线缓存功能，应该怎么办？赶紧分享下在评论区的经验！记得告诉你的朋友们！
var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})
评论0