屬性
- 設置Item，
localStorage.setItem(key, val); - 獲取Item，
localStorage.getItem(key); - 移除Item，
localStorage.removeItem(key); - 移除所有item，
localStorage.clear();
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="controller">
<button onClick="setImg()">set</button>
<button onClick="getImg()">get</button>
</div>
<script type="text/javascript" width="1920" height="1080">
let imgSrc = "https://s4.music.126.net/style/web2/img/default/default_album.jpg";
function setImg(key) {
var img = document.createElement('img');
img.setAttribute('crossOrigin', 'Anonymous');
img.addEventListener('load', function () {
var canvas = document.createElement('canvas');
debugger;
var canvasCxt = canvas.getContext('2d');
canvas.width = this.width;
canvas.height = this.height;
// render img to canvas
canvasCxt.drawImage(this, 0, 0, this.width, this.height);
var imgDataURL = canvas.toDataURL('image/jpeg');
try {
localStorage.setItem(key, imgDataURL);
} catch (e) {
console.log(e);
}
}, false);
img.src = imgSrc;
}
function getImg(key) {
let
src = localStorage.getItem(key),
imgObj = document.createElement('img');
imgObj.src = src;
document.body.appendChild(imgObj);
}
</script>
</body>
</html>
在線demo點擊此處
將圖片繪製到canvas上時，如果圖片地址存在跨域限制，需要爲img設置crossOrigin屬性：img.setAttribute('crossOrigin', Anonymous')