..说起前端缓存，大多数人会想到几种常规方案，比如cookie、localStorage、sessionStorage，或者加indexedDB和webSQL，并显示离线缓存。另外，有没有其他办法缓存前端数据呢？本文将带大家通过png图片的rgba值一步步探索如何缓存数据。PS：本文学习的内容已经集成到一个名为SphinxJS的开源JS库中。感兴趣的同学可以移步这篇文章SphinxJS——一个超轻量级的开源库，将字符串编码成png图片。相关文件，欢迎STAR！原理我们知道，通过为静态资源设置Cache-Control和Expires响应头，可以强制浏览器对其进行缓存。当浏览器向后台发起请求时，会先到自己的缓存中查找，如果缓存中没有，就会继续向服务器请求静态资源。利用这一点，我们可以通过这种静态资源缓存机制存储一些需要缓存的信息。那么我们如何将信息写入静态资源呢？Canvas提供了.getImageData()方法和.createImageData()方法，分别用于读取和设置图像的rgba值。所以我们可以使用这两个API来读写信息。接下来看示意图：当静态资源进入缓存后，后续任何对图片的请求都会先去本地缓存中查找，也就是说信息实际上已经以图片的形式缓存在本地了。注意，由于rgba值只能是[0,255之间的整数]，所以本文讨论的方法只适用于纯数字组成的数据。静态服务器我们使用node构建一个简单的静态服务器：constfs=require('fs')consthttp=require('http')consturl=require('url')constquerystring=require('querystring')constutil=require('util')constserver=http.createServer((req,res)=>{letpathname=url.parse(req.url).pathnameletrealPath='assets'+pathnameconsole.log(realPath)如果(realPath!=='assets/upload'){fs.readFile(realPath,"binary",function(err,file){if(err){res.writeHead(500,{'Content-Type':'text/plain'})res.end(err)}else{res.writeHead(200,{'Access-Control-Allow-Origin':'*','Content-Type':'image/png','ETag':"666666",'Cache-Control':'public,max-age=31536000','Expires':'Mon,07Sep202609:32:27GMT'})res.write(file,"binary")res.end()}})}else{letpost=''req.on('data',(chunk)=>{post+=chunk})req.on('end',()=>{post=querystring.parse(post)console.log(post.imgData)res.writeHead(200,{'Access-Control-Allow-Origin':'*'})letbase64Data=post.imgData.replace(/^data:image\/\w+;base64,/,"")让dataBuffer=newBuffer(base64Data,'base64')fs.writeFile('assets/out.png',dataBuffer,(err)=>{if(err){res.write(err)res.end()}res.write('OK')res.end()})})}})server.listen(80)console.log('侦听端口：80')这个静态资源的功能很简单，它提供了两个功能：通过客户端发送的base64生成图片并保存到服务器；设置图片的缓存时间，发送给客户端关键部分是设置响应头：res。writeHead(200,{'Access-Control-Allow-Origin':'*','Content-Type':'image/png','ETag':"666666",'Cache-Control':'public,max-age=31536000','Expires':'Mon,07Sep202609:32:27GMT'})这张图片我们设置Content-Type为一年，Expires为十年，理论上足够了长的。接下来，让我们进行客户端的编码。Client
