探索前端黑科技――通过png图的rgba值缓存数据

　　说起前端缓存，大部分人想到的无非是几个常规的方案，比如cookie，localStorage，sessionStorage，或者加上indexedDB和webSQL，以及manifest离线缓存。除此之外，到底还有没有别的方法可以进行前端的数据缓存呢?这篇文章将会带你一起来探索，如何一步一步地通过png图的rgba值来缓存数据的黑科技之旅。

　　我们知道，通过为静态资源设置Cache-Control和Expires响应头，可以浏览器对其进行缓存。浏览器在向后台发起请求的时候，会先在自身的缓存里面找，如果缓存里面没有，才会继续向服务器请求这个静态资源。利用这一点，我们可以把一些需要被缓存的信息通过这个静态资源缓存机制来进行储存。

　　那么我们如何把信息写入到静态资源中呢?canvas提供了.getImageData()方法和.createImageData()方法，可以分别用于读取和设置图片的rgba值。所以我们可以利用这两个API进行信息的读写操作。

　　当静态资源进入缓存，以后的任何对于该图片的请求都会先查找本地缓存，也就是说信息其实已经以图片的形式被缓存到本地了。

　　注意，由于rgba值只能是[0, 255]之间的整数，所以本文所讨论的方法仅适用于纯数字组成的数据。

　　这个静态资源的功能很简单，它提供了两个功能：通过客户端传来的base64生成图片并保存到服务器;设置图片的缓存时间并发送到客户端。

　　我们为这张图片设置了一年的Content-Type和十年的Expires，理论上足够长了。下面我们来进行客户端的coding。

　　假设我们需要存储的是32位的数据，所以我们为canvas设置宽度为8，高度为1。到底为什么32位数据对应长度为8，是因为每一个像素都有一个rgba，对应着red，green，blue和alpha4个数值，所以需要除以4。

　　首先我们假设需要被缓存的字符串为32位的01，然后我们使用.createImageData(8, 1)生成一个空白的imgData对象。接下来，我们对这个空对象进行赋值。为了实验效果更加直观，我们对rgba值都进行了放大。设置完了imgData以后，通过.putImageData()方法把它放入我们的canvas即可。

　　接下来，我们要把这个canvas编译为一张图片的base64并发送给服务器，同时接收服务器的响应，对图片进行缓存：

　　代码很简单，通过.toDataURL()方法把base64发送到服务器，服务器处理后生成图片并返回，其图片资源地址为。在img.onload后，其实图片就已经完成了本地缓存了，我们在这个事件当中把图片信息打印出来，作为和源数据的对比。

　　服务器，运行客户端，第一次加载的时候通过控制台可以看到响应的图片信息：

　　之前得到的结论，源数据与缓存数据存在误差的原因，经查证后确定为alpha值的干扰所致。如果我们把alpha值直接定为255，并且只把数据存放在rgb值内部，即可消除误差。下面是改良后的结果：

　　因为我懒，只是把alpha值给定为255而没有把循环赋值的逻辑进行更新，所以第4n位的元数据被直接替换成了255，这个留着读者自行修改有空再改

　　综上所述，这个利用png图的rgba值缓存数据的黑科技，在理论上是可行的，但是在实际操作过程中可能还要考虑更多的影响因素，比如设法消除服务端的误差，采取容错机制等。实际上也是可行的。

　　值得注意的是，localhost可能默认会直接通过本地而不是服务器请求资源，所以在本地实验中，可以通过设置header进行cors跨域，并且通过设置IP地址和80端口模拟服务器访问。

　　说是黑科技，其实原理非常简单，与之类似的还有通过Etag等方法进行强缓存。研究的目的仅仅为了学习，千万不要作为非法之用。如果读者们发现这篇文章有什么错漏之处，欢迎，也希望有兴趣的朋友可以一起进行讨论。

　　每日头条、业界资讯、热点资讯、爆料，全天微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb微博期待您的关注。

　　随着三星S8的亮相，全面屏手机一跃成为了行业内最流行的ID设计，用户之所以认可，主要...

　　今年5月下旬，华为发布了新一代的高颜值手机nova 2系列：5.寸的nova 2和5.5寸的no...

　　8月8日，OPPO在上海正式发布了R11巴萨限量版，这是OPPO和巴萨合作推出的第三款定制机...

　　Google Play应用商店每天都会新增数千款应用，其中许多质量。为了将这些应用清除...

　　东芝公司在周四宣布，公司将在没有合资公司伙伴西部数据参与的情况下，自主推进投资建...

　　美国职业社交网站LinkedIn推出一项新服务，帮助特定职业领域的人撮合成“师徒关系”。...

　　今年6月，面向高性能PC的Windows 10系统，今天，微软在博客正式公布了Windows...

　　去年9月1日，小米联合中国银联正式发布小米支付（Mi Pay），成为继苹果、三星、华为后...

　　日前，有网友反馈称，之前在网易云音乐中创建的歌单里一些港台歌手的歌曲变成了“灰色...

　　《师》联手它基金、领养日等公益组织，开展了“守护的契约”关爱流浪动物公益行动......

　　夜雾迷城活动2月22日5:00—2月28日23:59，本次活动新增套装黎明之冠新月之吻，下面为......