一、拖放API
1、介绍：
任何元素都能够拖放，并且支持浏览器与其他应用程序之间的数据的互相拖放，同时大大简化了拖放方面的相关代码。
2、拖放步骤：
将想要拖放的对象元素的draggable属性设为true,
另外img与a元素默认允许拖放 编写与拖放相关的事件处理代码
3、步骤：
（1）
- 事件处理函数的声明（dragstart）
- 获取传输对象（.dataTransfer()）
- 设置id
- 在目标元素内移动（dragover）
- 默认事件发生（.preventDefault()）
- 将拖放元素放置到目标元素内
- 获取传输对象
- 通过getData获得id
- 通过id获得dom节点
（2）通过getELementsByClassName()获得拖放元素
（3）获取目标元素
（4）绑定事件：需要拿到每一个拖放元素去绑定
（5）绑定放置元素事件
4、例子
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 500px;border: 1px solid green;}.parent{height: 130px;border: 1px solid red;margin: 10px;}.child{width: 100px;height: 100px;border: 1px solid blue;float: left;margin: 10px;}</style></head><body><!-- 可以将五个child拖放到2个parent， 也可以将parent放到child中 --><!-- 目标元素 --><divclass="parent"></div><divclass="parent"></div><!-- 拖放元素 --><divdraggable="true"class="child"id="one">1</div><divdraggable="true"class="child"id="two">2</div><divdraggable="true"class="child"id="three">3</div><divdraggable="true"class="child"id="four">4</div><divdraggable="true"class="child"id="five">5</div><script>
window.onload=function(){//2、获取拖放元素var children=document.getElementsByClassName("child");//将children转换为数组
children=Array.from(children);//3、获取目标元素var parents=document.getElementsByClassName("parent");//将parents转换为数组
parents=Array.from(parents);//4、绑定事件//绑定拖放元素事件 需要拿到每一个的拖放元素去绑定
children.forEach(function(item){//item ===>每一个拖放元素
item.ondragstart=ds;})//5、绑定放置元素事件
parents.forEach(function(item){
item.ondragover=dov;
item.ondrop=dr;})//当body中也绑定事件 当我们在parent中向外拖放child的时，把body设置为目标元素
document.body.ondragover=dov;
document.body.ondrop=dr;//1、事件处理函数的声明//dragstart 拖放开始事件functionds(event){//获取传输对象var dt=event.dataTransfer;//设置id setdata
dt.setData("id",this.id);//6、设置拖放过程中的鼠标样式
dt.effectAllowed="copy";}//dragover 在目标元素内移动functiondov(event){//默认
event.preventDefault();//阻止事件冒泡//event.stopPropagation();
event.dataTransfer.dropEffect="copy";}//drop 将拖放元素放置到目标元素内functiondr(event){//获取传输对象var dt=event.dataTransfer;//通过getData 拿到idvar id=dt.getData("id");//通过id获取dom节点var dom=document.getElementById(id);//追加parent元素this.appendChild(dom);//阻止事件冒泡 防止拖拽时出现多个行为
event.stopPropagation();}}</script></body></html>二、WebStorage
1、前端开发登录逻辑：
使用JWT（Json Web Token用于通信双方之间传递安全信息的，简洁的URL安全的表述性声明规范，经常在跨域身份验证） token验证机制
2、两个种类
sessionStorage 与localStroage
在localStorage文件中获取sessionStorage文件中存的数据，跨选项获取数据是获取不到的；因为sessionStorage中的数据仅限当选项卡拿到；
在session Storage中能够获取localStorage数据，local Storage中是同样是跨选项卡存在的
3、WebStorage中的事件保存
<input type="text" id="data" placeholder="input data to save">
<button onclick="saveItem()">保存</button>
<script>
//保存事件
function saveItem(){
var data=document.getElementById("data").value;
console.log(data);
//localStorage
localStorage.setItem("data",data);
}
</script>4、WebStorage中的监听
（1）event.key 被修改的数据键值
（2）event.oldValue 被修改前的值
（3）event.newValue 被修改后的值
（4）event.url 页面的URL地址
（5）event.storageArea 为变动的sessionStorage对象或localStorage对象
5、session Storage中的方法
（1）.setItem（） ：存放对象/数据
（2）.getItem（）：获取数据
（3）.removeItem（）：删除数据
（4）.clear（）：清除所有的数据
（5）.index（）：获取index对应的key值
（6）.length：获得storage中键值对数量
方法的使用
<script>
//对比二者的输出
console.log('sessionStorage',sessionStorage);
console.log('localStorage',localStorage);
// 存放一个键值对 (key : value) setItem
sessionStorage.setItem('name', 'zhangsan')
sessionStorage.setItem('age', 12)
// 放对象
// sessionStorage.setItem('obj', {name :'lisi', age: 13})
// 我们可以通过过JSON.stringfy转换一下
sessionStorage.setItem('obj', JSON.stringify({ name: 'lisi', age: 13 , token: '123321'}))
// 取出对应key的value
// 通过getItem(key) 拿到value
var age = sessionStorage.getItem('age')
console.log(age);
var obj = sessionStorage.getItem('obj')
// 取出来以后在转换成一个对象 JSON.parse
console.log(obj);
console.log(JSON.parse(obj));
// removeItem(name) 删除由name指定的键值对
sessionStorage.removeItem('name')
// clear() 删除所有的值 一般用在 用户点击退出或注销的时候 将用户保存在sessionStorage中的所有信息全部清空 防止缓存影响其他用户操作
sessionStorage.clear()
// 获得index位置处的key
console.log(sessionStorage.key(1));
// 获取storage中的键值对数量
console.log(sessionStorage.length);
// 获取localStorage中的数据
console.log(localStorage.getItem('gender'));
</script>