JavaScript(十六)web存储和移动端事件

Web存储

1.web存储简介

在H5中，新增了两种能够在客户端进行数据存储的技术
localStorage 永久性存储
sessionStorage 临时性存储
将数据以键值对的形式存储在客户端

只能存储字符串或者数字

2.localStorage 永久性存储

属性：
length 数据的个数
方法：
setItem(key,value) 添加数据
key: 要存储的数据的名称
value: 要存储的值
getItem(key) 根据key获取数据
clear() 清空所有的数据
removeItem(key) 删除指定的数据

3.sessionStorage 临时性存储

属性：
length
方法：
setItem(key,value) 添加一条数据
getItem(key) 获取数据
removeItem(key) 删除数据
clear() 清空

4.关于JSON

parse() 将json格式的字符串转换为对象
stringify() 将对象转换为json字符串

移动端事件

1.移动端常用事件有三个：

ontouchstart 手指按下
ontouchmove 手指移动
ontouchend 手指抬起
由于浏览器的模拟器有时候不太稳定，所以不推荐使用on的形式来添加事件，推荐使用addEventListener方法来添加事件。

若给移动端内容添加PC端事件，会出现300ms延迟问题。

点透问题：若表层元素和底层元素都可以被点击(具有点击行为)，若表层元素点击之后消失，则点击(手指按下)事件会漂移到下层元素，进而被下层元素触发。

如何解决点透问题？布局的时候，不要在下层布局具有点击属性的内容

2.移动端事件对象

touches 手指列表
changedTouches 手指列表(推荐使用这一个)
targetTouches 手指列表

3.手指对象常见属性：

clientX/clientY 相对于客户端位置
pageX/pageY 相对于页面左上角的位置
screenX/screenY 相对于显示器左上角的位置
force 按压力度
Idfentifier 事件标识符 数字