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>

　　

posted @ 2015-09-05 20:13  ICupid  阅读(551)  评论(0)    收藏  举报