前端存储的问题是在面试中比较容易问到的问题,下面总结一下前端存储的相关知识。首先,分为两大类:cookie和WebStorage
1.cookie
特点:产生于服务器端,保存于客户端;面向服务器,同一服务器下的cookie是共享的,不同服务器就不共享;它传输数据限制大小为4k以内,所以一般不会用cookie来存储数据
2.WebStorage
Webstorage分为sessionStorage和localStorage
sessionStorage:会话存储,针对选项卡,只要选项卡或者浏览器关闭,会话就会失效,数据最大可以传输5M
localStorage:本地存储,即将数据存储到磁盘中,关闭选项卡或浏览器数据还会存在,数据最大可以传输5M
3.拖拽事件
拖拽技术是H5中新增的,允许用户在网页内部或者浏览器与其它程序进行拖拽,拖拽可以传递数据。
拖拽元素:设置当前元素可拖拽,draggable='true'
放置元素:默认是不可以放置的,所以要取消默认,event.preventDefault()
拖动事件可以分为三个状态:1.开始拖动(ondragstart);2.正在拖动(ondrap)
3.拖动结束(ondragend)
放置事件同样有三个状态:1.进入放置元素(dragenter);2.放置元素内移动(dragover)
3.drop(放置在放置元素内)
拖拽事件流的流程:
dragstart->drag->dragenter->dragover->drop->drapend
下面我们通过一个案例来描绘拖拽事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
height: 200px;
border: 2px solid cyan;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
color: white;
float: left;
margin: 10px 0 0 10px;
}
body {
height: 400px;
}
</style>
<script>
window.onload = function() {
// 获取parent和child
var parent = document.querySelector('.parent');
var childs = document.querySelectorAll('.child');
childs = Array.from(childs);
// 给每一个孩子节点绑定事件
// childs.forEach(function(item){
// item.onclick=function(){
// parent.appendChild(this)
// }
// });
childs.forEach(function(item) {
// 拖动事件
// 开始拖动 on事件类型
item.ondragstart = function(event) {
console.log('ondragstart开始拖动了');
// console.log(event,'事件对象');
// 将拖动元素得id传出去
// dataTransfer.setData 传输数据 key value
console.log(item.id);
event.dataTransfer.setData('id', item.id);
}
// 正在拖动
item.ondrag = function() {
console.log('ondrap正在拖动');
}
// 拖动结束
item.ondragend = function() {
console.log('ondragend拖动结束');
}
})
// 放置事件 --放置元素 parent
// 进入到放置元素
parent.ondragenter = function() {
console.log('ondragenter进入到放置元素');
}
// 在放置元素内移动
parent.ondragover = function() {
console.log('ondragover正在放置元素内移动');
// 将放置元素设置为可放置
event.preventDefault();
}
// 将拖动元素放置到放置元素
parent.ondrop = function(event) {
console.log('ondrop放置');
//获取拖动元素传输得数据getData(key)
// console.log(event.dataTransfer.getData('id'),'事件对象');
var id = event.dataTransfer.getData('id');
this.appendChild(document.querySelector('#' + id))
// 阻止事件冒泡
event.stopPropagation()
}
// 将拖动元素放置到body
document.body.ondragover = function() {
console.log('ondragover正在放置元素内移动');
// 将放置元素设置为可放置
event.preventDefault();
}
// 将拖动元素放置到放置元素
document.body.ondrop = function(event) {
console.log('ondrop放置');
//获取拖动元素传输得数据getData(key)
// console.log(event.dataTransfer.getData('id'),'事件对象');
var id = event.dataTransfer.getData('id');
this.appendChild(document.querySelector('#' + id))
// 阻止事件冒泡
event.stopPropagation()
}
}
</script>
</head>
<body>
<!-- 放置元素:parent 放置事件:dragenter dragover drop-->
<!-- 拖动元素:child 拖动事件:dragstart drag dragend-->
<div class="parent"></div>
<!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 -->
<div class="child" id="one" draggable="true">one</div>
<div class="child" id="two" draggable="true">two</div>
<div class="child" id="three" draggable="true">three</div>
<div class="child" id="four" draggable="true">four</div>
</body>
</html>