说起前端缓存，大年夜部分人想到的无非是几个惯例的筹划，比如cookie，localStorage，sessionStorage，或者加上indexedDB和webSQL，以及manifest离线缓存。除此之外，到底还有没有其余办法可以进行前端的数据缓存呢?这篇文┞仿将会带你一路来摸索，若何一步一步地经由过程png图的rgba值来缓存数据的黑科技之旅。

道理

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

接下来看道理图：

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

留意，因为rgba值只能是[0, 255]之间的┞符数，所以本文所评论辩论的办法仅实用于纯数字构成的数据。

静态办事器

我们应用node搭建一个简单的静态办事器：

const fs = require('fs') 
 
const http = require('http') 
 
const url = require('url') 
 
const querystring = require('querystring') 
 
const util = require('util') 
 
  
 
const server = http.createServer((req, res) => { 
 
  let pathname = url.parse(req.url).pathname 
 
  let realPath = 'assets' + pathname 
 
  console.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', 
 
          	
			
 1/5    1 2 3 4 5 下一页 尾页
	
			

　　推荐阅读
　　C盘哪些文件可以删除？Windows 7系统C盘瘦身三大方法介绍
            
            1、打开开端菜单—附件—在敕令提示符上右键，选择以治理员身份运行：C盘哪些文件可以删除?实际上如不雅只是纯真的清理垃圾并不克不及整顿出若干空间，而经由过程Win7体系C盘瘦>>>详细阅读


本文标题：探索前端黑科技——通过png图的rgba值缓存数据
地址：http://www.17bianji.com/lsqh/36204.html
 1/2    1