转眼间2018年就快过去了，忙吐血的12月我这个勤劳的小蜜轰居然一篇博文都没写，怎么对得起9年义务教育的栽培！
闲言少叙，今天我们来聊聊前端缓存的本地缓存汪。
遥望从前，在下还是一只刚入行的小菜鸡，移动端h5还未出世，PC页面还是市场的主流，前端还是一个和美工抢着切图的工种，美国总统还是奥巴马，小崔还没有撕逼冯小刚...浏览器缓存还是用的Cookie！😲
1，cookie,session
这是我接触的最早的一种页面缓存，严格来讲它是http的产物，为了弥补http无状态协议的缺陷而创造的，http协议有天生缺陷，他记不住你是谁！
所以当你第一次访问填写了密码登录完了之后，再去访问别的页面，调用接口，他就不知道你是谁，是否登录过。
那怎么办呢？所以每次用户访问http服务器他都会给你返回一个cookie，用来标记这个用户，当这个用户再次访问服务器的时候cookie会跟随请求一同被发出，服务器便可识别这个用户信息。
为什么把cookie放在本地存储番里呢，因为cookie也可以存储信息，只不过存储空间较小，但是如果将重要的用户信息存储在cookie中不是很危险吗？所以又衍生出了session这种技术，可以在后台来存储用户信息，但是session是建立在cookie的基础上使用的，它的sessionId要存在cookie中！
现在的移动互联已经不用这些技术了，大家自己去生成token，但是在它的生成原理中你还是能够看到cookie的影子~
2，localStorage,sessionStorage
Html5新推出的用户本地缓存的技术，刚一推出就收到了热捧，因为它解决了cookie的一大问题：存储空间不足。但是它也和cookie有个本质区别：不会跟随http请求一同发送。毕竟是客户端js自己的东西~
localStorage和sessionStorage有什么区别呢? 这个答案百度一下会有大波大波的回答，但是在下在文章中也会稍稍提一句。
localStorage: 真正的本地存储，存储之后没有周期的概念，只要你不删除我我就一直存。
sessionStorage: 会话级本地存储，生命周期就在一次会话范围内，只要会话结束，存储消失。（说白了就是浏览器关闭，存储失效）
使用场景之在下愚见：
sessionStorage: 可以存储用户当前这次登录的信息，类似个人信息，行为记录等需要此次会话频繁用到的信息~
localStorage: 可以存储那些希望被长期存储无需再发起请求调用的信息，例如token，类似让用户免密登录的功能。
近期了解到localStorage还被用于存储了js和css，其庞大的存储空间用于存储js和css完全无压力，但是有两点我之前没有想到什么比较好的解决方案：
1，js和css文件的更新
2，xss攻击的预防
巧的是，经过了在下不断的努力（不断地百度谷歌），找到了这两篇优秀的博文，分别解答了我的疑惑。
3，indexDB
经过了在下一晚上的折腾，终于把这货搞明白些许，但是我一定要说，indexDB真是一项了不起的发明！
了不起1，它是localStorage的升级版，突破了localStorage的空间限制，岂止5m的存储空间，50M，500M都不止啊，只要看浏览器高兴，多少都给你，简直无法无天。
了不起2，可以说indexDB其实就是个非关系型数据库，以key-value的方式查询数据，毕竟js的api，查出的数据一律Object类型显示~
了不起3，数据库也该有个数据库的样子，indexDB也会支持事务，一次操作要么一起成功，要么一起失败。
了不起4，indexDB的操作都归于异步流程，不回因为数据量庞大的操作而阻塞js主线程
归纳了以上4条了不起的特点，也是他比localStorage要出彩的地方。下面说说indexDB的应用吧。
indexDB相对localStorage使用起来比较复杂，一般的本地存储需求用不上他，所以一般页面需要加载庞大数据结构，或是一个键值对较多的时候，就需要这货来大显神威了~
例如我们常用的地图，一个页面中总要包含成百上千的地标地点名称，光用图表数据结构给他们串联好就够费事的了，再一刷新页面都没了我哪儿找去呀，所以这时候就可以...出来吧，音带克斯迪比！！！
4，Service Worker
在下熬了两天夜终于把Service Worker这货弄明白一些些了，其实Service Worker的作用又何止能本地缓存...
他可以作为一个类似于charles的代理服务器使用，
可以模拟原生app去做消息推送，
可以完成与后台同步，
还有就是将文件缓存，并支持离线访问
刚刚过去的2018年前端有个词特别火，PWA（Progressive Web App）渐进式webApp，在下愚见，H5之所以能与原生打的难舍难分就在于它的可传播性，这一点已经被微信无限放大了，而强大的H5远不止于满足自己目前的状态，你native App有啥啊，我H5都行！这样PWA的概念就出现了，而Service Worker绝对是这个伟大计划中举足轻重的一环。
—— 前9f高级装B工程师 Yubble
想了解PWA的客爷请来这边《PWA文集》
废话咱就不多说了，来聊聊service worker的本地缓存，您里边儿请！
service worker的缓存，是一种类似localstorage的恒久缓存，如果你不处理它的话，它是会一直保存下去的。但是他缓存的并不是数据，而是——文件。
他可以将你页面中访问的所有文件都换存下来，像是js，css，图片，页面等等，这么一说是不是挺像http的强缓存的呀。但是你有见过离线依然能访问的吗？o(≧v≦)o~~好棒
关于service worker的具体写法请自行百度或拜读一下张先生的博客张鑫旭谈service worker
各位看官请看，上面这个demo是我效仿张鑫旭先生的成品做的，当我们首次访问页面，他的状态应该是停留在installing，此时我们需要缓存的文件都已经写到service worker的缓存中了
现在就算我将Offline勾上，模拟出断网的情况，再次刷新，呀？页面照样可以访问，打开network一看，全都是从service worker缓存拿出来的
就这样，一个前端的http缓存模拟出来了，完活儿。
本想写到这里就收摊了，可还想捎带提一下service workder中的对于http请求的监听~
这是service worker对fetch事件的监听，并非有fetch请求时才会触发这个方法，而是只要是http请求就都会触发到这个监听，包括对资源的访问。
是不是想到什么啦~我们可以对客户端发送的请求拦截吧，然后判断请求的数据是否有变化，从而返回缓存还是最新数据，这不就是redis一直在做的事吗？如果我们结合上面说的indexDB是不是就可以做到呢？好期待~😁
终于写完了，这回的博文真是，我都想骂我自己，本来只想简单规整一下本地缓存的知识点，还是罗里吧嗦的写了这么多，从前端缓存这一功能的迭代看来，还是劝亲戚家的小孩学H5吧...😂
年底了，北京的公司都在裁员，马上要回房山定居的我义不容辞的冲到了第一个买断了~希望我的下一家公司能是个技术氛围活跃的，有人文情怀的地方。祝各位客爷新年快乐🎆
网友评论