H5新API-拖拽和本地存储
- 一、拖拽和释放
- 1.1、设置对象的拖拽属性
- 1.2、拖拽API的相关事件
- 1.3、DataTransfer
- 二、本地存储
- 2.1 Storage对象
- 2.2 特性
- 2.2.1 window.localStorage
- 2.2.2 window.sessionStorage
- 2.3 方法
- 2.4 遍历Storage对象
- 三、存储事件
- 3.1 localStorage监听
- 3.2 属性
一、拖拽和释放
拖拽 Drag
释放 Drop
拖拽值的是鼠标点击源对象后一直移动对象不松手, 一旦松手即释放了
1.1、设置对象的拖拽属性
draggable属性: 标签元素默认是为不可拖拽的为false,要设置为true,否则不可拖拽
注意: 链接和图片默认是可以拖拽的
1.2、拖拽API的相关事件
被拖动的源对象可以触发的事件:
- ondragstart: 源对象开始被拖动
- ondrag: 源对象被拖动过程中
- ondragend: 源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以出发的事件:
- ondragenter: 目标对象被源对象拖着进入
- ondragover: 目标对象被源对象推着悬停在上方 //此方法需要阻止默认事件
- ondragleave: 源对象推着离开了目标对象
- ondrop: 源对象推着在目标对象上释放/松手
1.3、DataTransfer
在进行拖拽操作时, DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据。
存入数据 e.dataTransfer.setData(“key”,“value”);
取出数据 e.dataTransfer.getData(“key”);
二、本地存储
2.1 Storage对象
localStorage
sessionStorage
Storage对象在使用上和一般的JS对象没有什么区别: 设置对象的属性为字符串值, 随后浏览器会将该值存储起来
2.2 特性
- 设置读取方便
- 容量较大, sessionStorage约5M、localStorage约20M
- 只能储存字符串, 可以将对象JSON.stringify()编码后储存
3.1. JSON对象转换为JSON字符串
JSON.stringify()
3.2. JSON字符串转换为JSON对象
JSON.parse()- 可以通过.length获取对象内容数量
2.2.1 window.localStorage
- 永久生效, 除非手动删除
- 可以同源共享(同源: 同协议,同域名,同端口)
2.2.2 window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个页面下数据可以共享
2.3 方法
- setItem(key, value) 设置储存内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- 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 属性
- key : 修改或删除的key值, 如果调用clear()时, 该属性值为null
- newValue : 新设置的值, 如果调用removeItem()时, 该属性为null
- oldValue : 调用改变前的value值; 添加新项时, 该属性值为null
- storageArea : 当前的storage对象
- url : 触发该存储变化脚本所在文档的URL(也就是说那个页面修改的数据)