说到前端缓存，大部分人都会想到几种常规方案，比如cookie、localStorage、sessionStorage，或者indexedDB和webSQL，以及清单离线缓存。另外，有没有其他办法在前端缓存数据？本文将带大家通过png图片的rgba值一步步探索如何缓存数据。原理我们知道，通过为静态资源设置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)if(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,/,"")letdataBuffer=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('Listeningonport:80')这个静态资源的功能很简单，它提供了两个功能：通过client客户端发送的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
