触屏事件，事件对象 本地存储 移动端常用插件 点击延时问题

触屏事件概述

touch 对象代表一个触摸点，触摸事件可响应用户对屏幕或者触控板的操作；

触屏touch事件	说明
touchstart	手指触摸到DOM元素时触发
touchmove	手指在DOM元素移动时触发
touchend	手指从一个DOM元素离开时触发

触摸事件对象

TouchEvent 是一类描述手指在触摸平面的状态变化的事件，这类事件用于描述一个或多个触点。

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表 （touchstart后存在）
changedTouches	手指状态发生了改变的列表，从无到有，从有到无（touchend 后才有）

过渡结束事件

// 过渡动画结束之后出发该事件
div.addEventListener('transitionend', function () {});

click延时解决方案

click 在移动端会有300ms的延时，原因是移动端浏览器，有屏幕双击缩放（double tap to zoom）的效果

解决方案：

• 禁止缩放 <meta name="viewport" cotnent="user-scalable=no">
• 封装tap函数；原理
  • touchstart 和 touchend 触发的时候分别记录一个事件，检查是否超过 150ms ；小于判定为点击；
• fastclick 插件解决延时 https://github.com/ftlabs/fastclick

移动端常用 插件

superslide：http://www.superslide2.com/

swiper：https://www.swiper.com.cn/

iscroll：https://github.com/cubiq/iscroll

移动端视频播放插件：https://github.com/ireaderlab/zyMedia

本地存储特性

1，数据存储在浏览器中

2，设置，读取方便，甚至刷新网页不丢失数据

3，容量较大，sessionStorage 约 5M localStorage 约 20M

3，只能存储字符串，可以将对象 JSON.stringify() 编码后处理

window.sessionStorage

1，生命周期为浏览器关闭窗口

2，在同一个窗口（页面）下数据可以共享

3，以键值对的形式存在

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

window.localStorage

1，声明周期永久有效，除非手动删除，否则关闭页面也会存在

2，可以多窗口（页面）共享数据

3，以键值对进行存储

// 储存数据 localStorage.setItem(key, val);
localStorage.setItem('username', 'admin');
// 获取数据 localStorage.getItem(key);
loclaStorage.getItem('username');
// 删除数据 localStorage.removeItem('username');
localStorage.removeItem('username');
// 删除所有数据 localStorage.clear();
localStorage.clear();

document.cookie

// 设置cookie 
// Max-Age 有效期 s
document.cookie = 'key=value; Max-Age=3600'
// 获取 cookie
console.log(document.cookie) // 多个以 分号空格隔开

cookie sessionStorage localStorage 区别

localStorage

• 不存在有效期, 一直存在直到删除, 同域名下页面共享(同源策略), 支持 storage 事件 window.addEventListener('storage', fn)

sessionStorage

• 浏览器关闭后自动销毁, 页面私有, 不支持 storage 事件

cookie

• 浏览器会在每次请求的时候主动组织所有域下的 cookie 到请求头下的 cookie 中, 发送给服务器

• 浏览器会主动存储接受到 set-cookie 头信息的值

• 可以设置有效期

• 同域下个数有限制, 最好不要超过50个 (不同浏览器下不同)

• 单个 cookie 内容大小有限制, 最好不要超过 4000 字节 (不同浏览器下不同)