Web Storage API：简单的键值对存储
说起HTML5的Web Storage API，大家就不用担心怎么存储键值对了！实际上，它有个好兄弟叫sessionStorage，用于处理会话期间的数据；而另一个“罐子”localStorage，就是专门储藏那些不会消失的东西的。用了这个API，不仅可以减少服务器的工作量，缩短网页加载时间，让你的网站在用户眼中更加流畅。而且，用这个API存取数据超级方便，还可以把它当成是个临时的浏览器缓存，无论是程序员还是普通用户都应该看一看！
WebStorageAPI（网络储存服务）这位小伙伴真好用，可以让你在浏览器上方便快捷地保存东西。别担心地方不够用或者找不见，随时随地都能和别人分享，速度可是飞快！尤其适合存储那些常见的文件小的数据，只要是字符串格式，统统无忧。但别忘了，这款功能仅限于存储字符串类型的数据，太复杂太大的就免了。
知道？别乱弄 sessionStorage跟 localStorage。Session Storage里的东西只要网页或者浏览器关掉就全没了。Local Storage就牛了，能在你电脑上待着，除非你自己去删，要么就是过期了才会消失。简单说如果想要快速、安全地存点什么东西，程序员们会根据情况帮我们选择适合的Web Storage来保存信息！
IndexedDB：轻量级NoSQL数据库
亲爱的朋友们，你好你们是不是对INDEXEDDB这个东西感兴趣？它可是个HTML5里边的NoSQL小帮手！和web storage api相比，indexedDB不仅能装载更多的数据，而且可以用复杂的方法查找索引，管理事务等等。对于那些需要处理大量数据的人来说，这简直就是神器！而且，使用indexedDB会比使用web storage api更加灵活快速，所以大家放心大胆地去尝试，绝对不会失望的！
如果你想在web上用IndexedDB的话，就可以随便开几十个库，里面塞任何玩意儿都行，比那些传统的关系型数据库更酷。它没有表格结构的束缚，怎么舒服怎么来呗。所以，要处理大批量的结构化信息或者几个复杂的查询，IndexedDB肯定是你好帮手！
IndexedDB这玩意儿可好用了，保证咱们的数据库操作安全稳定，比如它还提供了“事务处理”功能，多步操作也不怕乱套，可靠得很。如果碰到需要处理复杂或涉及多对象关系的事儿，别忘了IndexedDB这个助手，肯定能帮你顺利解决问题哒。
Service Workers：离线工作线程
知道 serviceworkers 不？那可是 H5 的秘密武器！专门处理在线无法完成的任务。这个小东西主要干些什么？它会接收网络信号，然后把它们存起来，这样即使你没网了，使用起来还是很流畅。而且，你还可以通过serviceworker来选择怎么存储这些缓存。比如，就算断网了，网页上的内容还能继续存在；或者，有些网络信号就被它给屏蔽掉了。
Service Worker其实就是你浏览器里面的隐形帮手，就算网页和窗口关掉，它们还是会静静地帮你处理各种事。这种东西真的能做出离线APP来，用着爽翻天，没得说用户体验就是好到爆炸！
只要你跟我们的志愿者说，他们就能帮你阻止网络请求，反正就是按照你们规定的方式运行就对了。这么做的话，不仅减少了资源的使用次数，开网页也会更快！即使网络变慢或者断掉，他们也能用本地的缓存资料给大家看，所以你的站还是依旧稳定！
Service Worker功能大升级——推送通知来了，手机可以立马收到服务器发过来的信息，直接地把内容送到你眼前。这种设计对于咱开发者来说就是给咱新添了个好用的消息推送方式，用户体验感也提高很多哒～
Cache API：HTTP缓存管理
别看那个 Cache API在Service Worker里好像挺神秘的，其实就是个能让HTTP缓存变得简单又高效的神奇工具。用了它，无论是处理缓存还是调整缓存策略都像玩儿似的简单！
用上这个API，我们可以把常见的HTTP响应保存下来，以后就不需要跑去服务器拿了，自己电脑里就能访问。这样一来，不仅省钱省时间，还能提升网站速度！
搞个叫Cache API的东东，我们就能随心所欲定制和管理缓存规矩了。还能在有新料时自动刷新本地缓存，确保我们看到的永远是最新的。调整下API参数，就能让我们的网络使用更顺畅，不再瞎忙活，也能给服务器减压！
这个名叫Cache API的东西，在Service Workers中就是个能手，主要负责HTTP缓存这部分。它不仅让HTTP缓存变得简单了，还给我们这些做开发的人提供了超级给力且实用的API接口！
Application Cache：网站资源离线缓存
说实话，应用缓存就是牛逼。特别在 HTML 5 里面，虽然看着不起眼儿，但是浏览器关了还能继续刷网页。其实你只要搞定两个事儿：弄份清单文件说明要保留啥，然后教浏览器怎么定时更新这份文件。下次访问网站时，浏览器就会自动把这些文件搬到你电脑里，再也不怕找不到了。这就是大名鼎鼎的应用缓存。
App cache就是专给那些需要随时看全套但大部分时间挺稳定的应用准备的。关键在于即使在没网的时候也能用！这样就解决了一大堆网络问题，加载更快了，再也不愁断网~
其实，你得知道，这个Application Cache有个小毛病，就是更新难、占用空间大，动态调节也不好使。所以在用之前先了解清楚这种情况。那咋整？我们可以试试看使用Service Workers，这样我们的离线功能就牛逼多了、实用性更高哈。
选择与使用：
说实话，H5本来就没自带缓存。不过没事儿，我们有办法通过使用Web Storage API、IndexedDB、Service Workers、Cache API和 Application Cache这些家伙来打造适合我们自己的缓存战略！只要这么干，你的程序就会变得超级给力，用着超爽的感觉！
咋整？主要看咱要处理啥玩意：要是跑马灯似的小信息，直接上Web Storage；大型东西就扔给IndexedDB；速度优先或有限速需求的话，Service Workers来帮忙；网页刷半天不出怎么办？Cache能救急；最后要上网不方便也能浏览的，还是选Application Cache。
那得看你的需求和如何改良，选准了靠谱技术才好办事。
哥儿几个，咱聊聊呗！咱都用过哪些H5的缓存技术？有没有遇到什么棘手问题？快来跟大伙儿分享一下！
评论0