前端存储
- 分为cookie和WebStorage,WebStorage分为sessionStorage和localStorage;
- cookie特点,产生于服务器端,保存在客户端,同一服务器下的cookie共享的,传输数据最大为4kb;
- sessionStorage会话存储,针对于选项卡,选项卡关闭或者浏览器关闭,会话失效,传输数据可以达到5M;
- localStorage本地存储,将数据存到本地磁盘中,即使选项卡关闭或者浏览器关闭,数据依旧存在,传输数据可以达到5M;
- 方法cookie、sessionStorage、localStorage。
1.创建一个cookie,7天后过期
<!-- js-cookie库操作cookie -->
<!-- 引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
<script>
console.log(Cookies, '打印cookies');
// 设置Cookies 参数:key value 设置过期时间
Cookies.set('status', '正常', { expires: 7 });
Cookies.set('gender', 'male', { expires: 7 });
// 获取cokie get参数:键名/属性名
console.log(Cookies.get('status'));
console.log(Cookies.get('gender'));
// 移除cookie remove 参数:属性名
Cookies.remove('status');
</script>
2.WebStorage
//1. sessionStorage 会话存储特点
//页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
//打开多个相同的URL的Tabs页面,会创建各自的sessionStorage。
//关闭对应浏览器tab,会清除对应的sessionStorage。
//sessionStorage 实例方法
// 设置内容
sessionStorage.setItem('name','terry');
// 获取内容
console.log(sessionStorage.getItem('name'));
// 清空内容的属性值
// sessionStorage.clear();
// 清空内容
sessionStorage.removeItem('name')
//2. localStorage 本地存储 存到本地磁盘中,即使浏览器关闭数据依然在。
// 设置内容
localStorage.setItem('name','larry');
// 获取内容
console.log(localStorage.getItem('name'));
// 清空内容
localStorage.clear()
// 清空内容
// localStorage.removeItem('name')
拖拽事件
拖拽元素:设置当前元素可拖拽,draggable='true'。
放置元素:默认是不可以放置的,取消默认行为event.preventDefault()。
拖放事件:拖放元素使用,on拖放事件类型。
dragstart(开始拖放) drag(正在拖放) dragend(拖放结束)
放置事件: 放置元素使用,on放置事件类型。
dragenter(进入放置元素) dragover(放置元素内移动) drop(放置在放置元素内)
传输数据:event.dataTransfer.setData(); 开始拖放事件。
获取数据: event.dataTransfer.getData();放置事件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>
body {
height: 400px;
}
.parent {
height: 200px;
border: 2px solid crimson;
}
.child {
width: 100px;
height: 100px;
background-color: rgb(255, 200, 0);
color: #fff;
float: left;
margin: 10px 0 0 10px;
}
</style>
<script>
window.onload = function () {
var parent = document.querySelector('.parent');
var childs = document.querySelectorAll('.child');
childs = [...childs];
// 给每一个孩子节点绑定事件
// childs.forEach(function (item) {
// item.onclick = function () {
// parent.appendChild(this);
// }
// })
childs.forEach(function (item) {
// 拖动事件
// 开始拖动
item.ondragstart = function (event) {
console.log('开始拖动');
// 将拖动元素id传出去
// dataTransfer.setData 传输数据 key value
console.log(item);
event.dataTransfer.setData('id', item.id)
}
item.ondrag = function () {
console.log('ondrag正在拖动');
}
item.ondragend = function () {
console.log('ondragend拖动结束');
}
})
// 放置元素 ---放置元素 parent
// 进入到放置元素
parent.ondragenter = function () {
console.log('ondragenter进入到放置元素');
}
// 在放置元素内移动
parent.ondragover = function (event) {
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 (event) {
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>
跨文档通信
跨文档数据传输
在A页面中通过window.open方式打开B页面,或者在A页面中通过iframe嵌套B页面,我们想让A中的数据传递到B中,就可以使用跨文档消息传输。
通过window.open打开b页面
//A页面
<a href="./B页面.html?name=zhangsan&age=12">去B页面</a>
//B页面
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
<script>
console.log(location, '关于当前页面的信息');
var str = location.search;
str = str.slice(1);
// console.log(Qs.parse(str));
str = str.split('&');//[ "name=zhangsan", "age=12" ]
// console.log(str);
str = str.map(function (item) {
return item.split('=')
});
console.log(str);
var obj = {};
str.forEach(function (item) {
console.log(item);
obj[item[0]] = item[1];
})
console.log(obj); //{ name: "zhangsan", age: "12" }
</script>
</head>
<body>
B页面
</body>
通过内联框架
A页面
<!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>
<script>
window.onload = function () {
var btn1 = document.querySelector('button');
var btn2 = document.getElementsByTagName('button')[1];
var btn3 = document.getElementsByTagName('button')[2];
// 给按钮绑定点击事件
var win;
btn1.onclick = function () {
// 返回我们打开页面窗口
window.open('./B1页面.html');
}
btn2.onclick = function () {
// 发送数据 参数:要发送的数据 发送的域名 *
win.postMessage('hello', '*');
}
btn3.onclick = function () {
// 获取内联框架的窗口 --->B1页面
win = document.querySelector('iframe').contentWindow;
}
}
</script>
</head>
<body>
<!-- A1页面 使用 -->
<button>打开B1页面</button>
<button>发送数据</button>
<button>使用内联框架发送数据</button>
<br>
<iframe src="./B1页面.html" frameborder="0"></iframe>
<iframe width="320" height="85" frameborder="0" scrolling="no" hspace="0"
src="https://i.tianqi.com/?c=code&a=getcode&id=6&py=chongqing&icon=1"></iframe>
<iframe width="680" height="260" frameborder="0" scrolling="no" hspace="0"
src="https://i.tianqi.com/?c=code&a=getcode&id=13&py=chongqing&icon=1"></iframe>
</body>
</html>
B页面
<!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>
body {
height: 400px;
background-color: rgb(235, 224, 165);
}
</style>
<script>
// onmessage 接收数据
window.onmessage = function (event) {
// 接收数据
console.log(event.data); //hello
// 地址来源
console.log(event.origin); //null
}
</script>
</head>
<body>
B1页面
</body>
</html>