JavaScript学习10-移动端网页特效和本地存储

触屏事件

事件	说明
touchstart	触摸到一个元素时触发
touchmove	在一个元素上滑动时触发
touchend	移开一个元素时触发

<div class="a"></div>
<script>	
			var div=document.getElementsByClassName('a')[0];
			div.addEventListener('touchstart',function(){
				console.log('touchstart');
			})
</script>

触屏事件对象touchevent

touchstart, touchmove, touchend都有自己的触屏事件对象

触摸列表	说明
touches	正在触摸屏幕的所有手指的列表
targetTouches	正在触摸当前DOM元素的手指列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无的变化

移动端拖动元素

touchstart, touchmove, touchend都可以拖动元素。
拖动元素需要获取手指的坐标值，使用tartgetTouches[0]里的pageX和pageY.。
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置。
拖动元素监听事件步骤：
1、touchstart: 获取手指初始坐标，获取盒子原来的位置
2、touchmove: 计算手指的滑动距离，并且移动盒子
3、touchend
注意手指移动时会触发滚动事件，所以要阻止默认的屏幕滚动e.preventDefault();

<script>
	var div=document.querySelector('div');
	var startX=0;
	var startY=0;
	var x=0;
	var y=0;
	div.addEventListener('touchstart',function(e){
		startX=e.targetTouches[0].pageX;
		startY=e.targetTouches[0].pageY;
		x=this.offsetLeft;
		y=this.offsetTop;
	});
	div.addEventListener('touchmove',function(e){
		var moveX=e.targetTouches[0].pageX-startX;
		var moveY=e.targetTouches[0].pageY-startY;
		this.style.left=x+moveX+'px';
		this.style.top=y+moveY+'px';
		e.preventDefault();
	});
</script>

click延时解决方案

移动端click事件会有300ms的延时，因为移动端双击会缩放页面。
禁用缩放

<meta name="viewport" content="user-scalable=no">

利用touch事件封装300ms延迟

<script>
	function tap(obj,callback){
		var isMove=false;
		var startTime=0;
		obj.addEventListener('touchstart',function(e){
			startTime=Date.now();   //记录触摸时间
		});
		obj.addEventListener('touchmove',function(e){
			isMove=true;  //看是否移动，移动算拖拽不算点击
		});
		obj.addEventListener('touchend',function(e){
			if(!isMove&&(Date.now()-startTime)<150){
				callback&&callback();  //执行回调函数
			}
			isMove=false;  
			startTime=0;
		});
	}
//调用
tap(div,function(){});
</script>

本地存储

特性：
1、数据存储在用户浏览器中
2、设置、读取方便，页面刷新不易丢失数据
3、容量较大，sessionStorage约5M，localStorage约20M
4、只能存储字符串，可以将对象JSON.stringfy()编码后存储

window.sessionStorage

生命周期为关闭浏览器窗口，在同一个窗口页面下数据可以共享，以键值对的形式存储使用。
右键检查》》应用程序(Application)》》会话存储（sessionStorage）。

//存储数据
sessionStorage.setItem(key,value)
//获取数据
sessionStorage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//删除所有数据
sessionStorage.clear()

<script>
	var input=document.querySelector('input');
	var btn=document.querySelector('button');
	btn.onclick=function(){
		var value=input.value;
		sessionStorage.setItem('username',value);
	}
</script>

window.localStorage

生命周期永久，除非手动删除否则一直存在，关闭页面也存在。可以同一浏览器多窗口多页面共享，以键值对形式存储使用。

//存储数据
localStorage.setItem(key,value)
//获取数据
localStorage.getItem(key)
//删除数据
localStorage.removeItem(key)
//删除所有数据
localStorage.clear()