拖放及存储技术

事件
dragstart 按下鼠标按键 并开始移动鼠标 会触发dragstart事件 我们通过ondragstart来调用方法
drag 当dragstart开始 会持续触发drag事件 类似mousemove事件
dragend 当拖放停止时（鼠标按键抬起时） 会触发
dragenter 拖动元素被拖动到放置元素上
dragover 拖动元素在放置元素范围内移动
dragleave拖动元素从放置元素上移出
drop 放置事件
拖放事件 生命周期
dragstart>drag>dragenter>dragover>drop>dragend
数据交互
通过dataTransfer去保存 获取数据 只能在拖放事件处理程序中使用
event.dataTransfer
方法：
dataTransfer.setData(key,value);
dataTransfer.getData(key);
定义放置目标

 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

定义拖动元素

 <img id="img" draggable="true" ondragstart="drag(event)">

Web前端本地存储

1.Cookies-----存储到浏览器中 面向服务器 同一服务器可以共享cookies 产生于服务器端 4kb
cookies.set()根据给定cookie数据设置一个cookie；如果同样的cookie存在讲会覆盖
cookies.get()返回一个单独的 cookie 的信息
cookies.remove()根据名字删除cookie
2.webStorage
2.1sessionStorage ------会话存储 选项卡 浏览器关闭 会话失效–推荐使用

 setItem('name','zhangan');
 getItem('name');
 clear('name');//清空属性值
 removeItem('name')//全部清空

2.2localStorage-------本地存储 本地磁盘中 手动清除 浏览器选项卡关闭不会失效

 setItem('name','zhangan');
 getItem('name');
 clear('name');//清空属性值;
 removeItem('name')//全部清空;

WebScoket
实时的 长连接的一个
非http协议的一种全双工通讯方式 ws协议
需要服务器的支持