localStorage和sessionStorage
localStorage：永久存儲，只要不清除緩存，會一直存在
sessionStorage：臨時存儲，只在當前窗口有效，關閉當前窗口或新打開窗口無效
cookie：可以設置緩存時間
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="aa" alt="A close up of an elephant" src="../image/01.png">
<img id="bb" alt="A close up of an elephant" src="../image/02.png">
</body>
<script>
var gsFiles = JSON.parse(sessionStorage.getItem("gsFiles")) || {};
var a = document.getElementById("aa");
var b = document.getElementById("bb");
gsFilesDate = gsFiles.date;
date = new Date();
todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();
function imgLoad(el){
var imgCanvas = document.createElement("canvas");
imgContext = imgCanvas.getContext("2d");
// 確保canvas尺寸和圖片一致
imgCanvas.width = el.width;
imgCanvas.height = el.height;
// 在canvas中繪制圖片
imgContext.drawImage(el, 0, 0, el.width, el.height);
// 將圖片保存為Data URI
if(el == a){
gsFiles.a = imgCanvas.toDataURL("bj.png");
}else{
gsFiles.b = imgCanvas.toDataURL("bj.png");
}
//gsFiles.el = imgCanvas.toDataURL("bj.png");
gsFiles.date = todaysDate;
// 將JSON保存到本地存儲中
try {
sessionStorage.setItem("gsFiles", JSON.stringify(gsFiles));
}
catch (e) {
console.log("Storage failed: " + e);
}
}
// 檢查數據，如果不存在或者數據過期，則創建一個本地存儲
if (typeof gsFilesDate === "undefined" || gsFilesDate < todaysDate) {
// 圖片加載完成后執行
<!--image1-->
a.addEventListener("load", function () {
imgLoad(a)
}, false);
b.addEventListener("load", function () {
imgLoad(b)
}, false);
// 設置圖片
a.setAttribute("src", "../image/01.png");
b.setAttribute("src", "../image/02.png");
}
else {
// Use image from sessionStorage
a.setAttribute("src", gsFiles.a);
b.setAttribute("src", gsFiles.b);
}
console.log(document.cookie)
</script>
</html>
sessionStorage和localStorage用法相同
function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires; } function getCookie(c_name){ if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)) } } return "" } function checkCookie(){ var src=getCookie("src"), src1=getCookie("src1"); if (src==""){ setCookie("src","../image/02.png",30); setCookie("src1","../image/01.png",30); // alert(1) }else{ //setCookie("src",getCookie("username"),30); //alert(2) } document.getElementById("aa").src=getCookie("src"); document.getElementById("bb").src=getCookie("src1"); }