2020/6/2 学习总结 canvas尾声和WebStorage部分-CSDN博客

本文链接：https://blog.csdn.net/m0_46376522/article/details/106503183

canvas保存文件

canvas API使用toDataURL方法把绘画的状态输出到一个dataURL中然后装载，然后我们可以把重新装载后的文件直接保存。
dataURL：base64位编码的URL，可以直接嵌入网页。
dataURL格式：“data:image/jpeg;base 64/9j/4…”

toDataURL使用方法：
canvas.toDataURL(‘type’);
使用一个参数type，输出数据的MIME类型。
MIME类型：jpg，image/jpeg

例如：

widow.location=canvas.toDataURL('image/jpeg');

canvas小示例

使用setInterval方法设置动画的间隔时间
setInterval方法为HTML中固有方法，接受两个参数，第一个表示执行动画的参数，第二个为间隔时间，单位：毫秒。
```
setInterval(painting,100);
```
用来绘图的函数
a.通过不断地变换x，y实现动画
b.用clearRect方法擦除
context.fillRect(x,y,width,height);
x,y:起点
width,height:擦子的长度和高度

	context.fillStyle="green";
	context.fillRect(0,0,width,height);
	context.clearRect(10,10,width-100,height-100);

WebStorage

sessionStorage 临时保存
保存时间：打开网站到关闭网站之间
用法：
a.sessionStorage.setItem(‘key’,value);
或：sessionStorage.key=‘value’;
b.读取时：变量=sessionStorage.getItem(‘key’);
或变量=sessionStorage.key;

js文件:
function saveStorage(id){
	var target =document.getElementById(id);
	var str=target.value;
	sessionStorage.setItem("mess",str);
}

function loadStorage(id){
	var target=document.getElementById(id);
	var msg=sessionStorage.getItem("mess");
	target.innerHTML=msg;
}

localStorage永久保存（保存至本地客户端）
用法：
a.localStorage.setItem(‘key’,value);
或：localStorage.key;
b.读取：变量=localStorage.getItem(‘key’);
或变量=sessionStorage.key;

js文件：
function saveStorage(id){
	var target =document.getElementById(id);
	var str=target.value;
	localStorage.setItem("mess",str);
}

function loadStorage(id){
	var target=document.getElementById(id);
	var msg=localStorage.getItem("mess");
	target.innerHTML=msg;
}

html文件：
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>Web Storage本地储存</title>
		<script type="text/javascript" src="index.js"></script>
		<!--<script type="text/javascript" src="index2.js"></script>-->
	</head>
	<body>
		<h1>Web Storage本地储存</h1>
		<p id="msg"></p>
		<input type="text" id="input" >
		<input type="button" value="保存数据" onclick="saveStorage('input');">
		<input type="button" value="读取数据" onclick="loadStorage('msg');" >
	</body>
</html>

访客留言板

saveStorage函数
"new Date().getTime()"获取当前日期和时间戳，然后用localStorage.setItem将获取的时间戳作为键值，并将文本框中的数据作为键名进行保存。
loadStorage函数
取得保存后的数据，以表格的形式显示。
属性：
a.loadStorage.length:
b.localStorage.key(index)
想要得到的数据的索引号作为index参数传入，得到localStorage中与该索引号对应的数据
c.clearStorage
localStorage.clear();
将保存在localStorage中的数据全部清除

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>简单的网页留言板</title>
		<script type="text/javascript" src="index.js"></script>
	</head>
	<body>
		<h1>简单的网页留言板</h1>
		<textarea id="dome" cols="60" rows="10"></textarea>
		<br />
		<input type="button" value="保存" onclick="saveStorage('dome');">
		<input type="button" value="清除" onclick="clearStorage('msg');" >
		<input type="button" value="读取" onclick="loadStorage('msg');">
		<hr />
		<p id="msg"></p>
	</body>
</html>

function saveStorage(id){
	var data = document.getElementById(id).value;
	var time = new Date().getTime();
	localStorage.setItem(time,data);
	alert("数据已经被保存！");
	loadStorage('msg');
}

function loadStorage(id){
	var reselt='<table border="1">';
	for (var i=0;i<localStorage.length;i++){
		var key=localStorage.key(i);
		var value =localStorage.getItem(key);
		var date=new Date();
		date.setTime(key);
		var datestr=date.toGMTString();
		reselt+='<tr><td>'+'这是第'+i+'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>'
	}
	reselt+='</table>';
	var target=document.getElementById(id);
	target.innerHTML=reselt;
}

function clearStorage(id){
	localStorage.clear();
	alert("数据已被成功删除！");
	loadStorage('msg');
}