H5新API-拖拽和本地存储

---

一、拖拽和释放

拖拽 Drag
释放 Drop

拖拽值的是鼠标点击源对象后一直移动对象不松手, 一旦松手即释放了

1.1、设置对象的拖拽属性

draggable属性: 标签元素默认是为不可拖拽的为false,要设置为true,否则不可拖拽
注意: 链接和图片默认是可以拖拽的

1.2、拖拽API的相关事件

被拖动的源对象可以触发的事件:

1. ondragstart: 源对象开始被拖动
2. ondrag: 源对象被拖动过程中
3. ondragend: 源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以出发的事件:

1. ondragenter: 目标对象被源对象拖着进入
2. ondragover: 目标对象被源对象推着悬停在上方 //此方法需要阻止默认事件
3. ondragleave: 源对象推着离开了目标对象
4. ondrop: 源对象推着在目标对象上释放/松手

1.3、DataTransfer

在进行拖拽操作时, DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据。

存入数据 e.dataTransfer.setData(“key”,“value”);
取出数据 e.dataTransfer.getData(“key”);

二、本地存储

2.1 Storage对象

localStorage
sessionStorage
Storage对象在使用上和一般的JS对象没有什么区别: 设置对象的属性为字符串值, 随后浏览器会将该值存储起来

2.2 特性

1. 设置读取方便
2. 容量较大, sessionStorage约5M、localStorage约20M
3. 只能储存字符串, 可以将对象JSON.stringify()编码后储存
   3.1. JSON对象转换为JSON字符串
   JSON.stringify()
   3.2. JSON字符串转换为JSON对象
   JSON.parse()
4. 可以通过.length获取对象内容数量

2.2.1 window.localStorage

1. 永久生效, 除非手动删除
2. 可以同源共享(同源: 同协议,同域名,同端口)

2.2.2 window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个页面下数据可以共享

2.3 方法

1. setItem(key, value) 设置储存内容
2. getItem(key) 读取存储内容
3. removeItem(key) 删除键值为key的存储内容
4. clear() 清空所有存储内容

2.4 遍历Storage对象

for(var i = 0 ; i < localStorage.length ; i++){
	var key = localStorage.key(i);	//遍历所有的key值
	var value = localStroage.getItme(key);  //通过遍历到的key值查找值
}

三、存储事件

3.1 localStorage监听

onstorage
注意点: 当前页面不触发, 同源页面触发

3.2 属性

1. key : 修改或删除的key值, 如果调用clear()时, 该属性值为null
2. newValue : 新设置的值, 如果调用removeItem()时, 该属性为null
3. oldValue : 调用改变前的value值; 添加新项时, 该属性值为null
4. storageArea : 当前的storage对象
5. url : 触发该存储变化脚本所在文档的URL(也就是说那个页面修改的数据)