H5缓存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var src = '../img/99.jpg'; function setImg(key) { var img = document.createElement('img'); //当图片加载完成的时候触发回调函数 img.addEventListener('load', function() { var imgCanvas = document.createElement('canvas'), imgContext = imgCanvas.getContext('2d'); //确保canvas的大小和图片一致 imgCanvas.width = this.width; imgCanvas.height = this.height; //渲染图片到canvas中 imgContext.drawImage(this, 0, 0, imgCanvas.width, imgCanvas.height); //用data——url的形式取出 var imgAsDataUrl = imgCanvas.toDataURL('img/png'); try { localStorage.setItem(key, imgAsDataUrl); } catch (e) { //TODO handle the exception console.log("Storage failed" + e); } }, false); img.src = src; } function getImg(key) { var imngSrc = localStorage.getItem(key); var imgObj = document.createElement('img'); imgObj.src = imngSrc; document.body.appendChild(imgObj); } </script> <script> function set(key, val) { var currentTime = new Date().getTime(); localStorage.setItem(key, JSON.stringify({ data: val, time: currentTime })); } function get(key, exp) { var data=localStorage.getItem(key), dataObj=JSON.parse(data); if (new Date().getTime()-data.time>exp) { console.log(''); } else{ console.log("data="+dataObj); } } </script> <script> var indexDb=window.indexDb||window.webkitIndexedDB; </script> </body> </html>