上文:https://blog.csdn.net/hey_myx/article/details/120308078
本文主要是对上文的补充和总结
一、web存储
对于web存储这是一个很重要的点,web存储包含cookie和webStorage两个方面。下面来详细介绍。
1.Cookies
cookie存储在浏览器中,每次浏览器向服务器发送请求都需要携带cookie,一般情况下,cookie是产生于服务器端,保存于客户端,但是我们也可以通过js来产生cookie;通常通过js-cookie这个库来操作cookie。
简而言之,存储到浏览器中 面向服务器 同一服务器可以共享cookies 产生于服务器端 4kb。
1.Cookie //创建一个cookie,7天后过期
Cookies.set("name","this is a test cookie",{ expires: 7 })
//获取cookie
console.log(Cookie.get('name'));
//移除cookie
Cookies.remove('name');
2.webStorage
对于webStorage,是HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接,这个连接是实时的也是永久的,除非被显示关闭,服务器也可以随时将消息推送到客户端。它主要包含sessionStorage和localStorage两个方面。
sessionStorage -会话存储 选项卡 浏览器关闭 会话失效--推荐使用
属 性:
setItem('name','zs');
getItem('name');
clear('name'); // 清空属性值
removeItem('name'); //全部清空
localStorage -本地存储 本地磁盘中 手动清除 浏览器选项卡关闭不会失效
二、通信
跨文档消息传输,H5提供了网页文档之间互相接收与发送消息的功能。当在a页面中通过window.open方法打开b页面,或者在a页面中通过iframe嵌套b页面,我们想让a中的数据传递到b中就可以使用跨文档消息传输。
1.通过window.open打开B1页面,A1页面打开新窗口
window.onload=function(){
// 获取button按钮
var btn=document.querySelector('button');
// 获取发送数据按钮
var sendBtn=document.querySelector('#send');
// 点击btn 打开一个新窗口
var win;
btn.onclick=function(){
win=window.open('./B1.html') 会返回一个窗口对象
}
// 点击send按钮 发送消息给B1窗口
sendBtn.onclick=function(){
win.postMessage('hello','http://127.0.0.1:5500')
}
}
B1页面接受传递过来的消息
window.onmessage=function(event){
// 接收到的数据
console.log(e.data);
// 数据的来源
console.log(e.origin)
}
2.通过内联框架
<script>
window.onload = function () {
var btn = document.querySelector('button');
var sendBtn = document.querySelector('#send');
var iframeBtn = document.querySelector('#iframe');
var win;
btn.onclick = function () {
// 打开新页面
win = window.open('./B1.html');
console.log(win);
}
sendBtn.onclick = function () {
//发送消息
var obj = { name: 'zhangsan', age: 12 };
win.postMessage(obj);
}
iframeBtn.onclick = function () {
//获取b1内联窗口,使用窗口发送数据
win = document.querySelector('iframe').contentWindow;
}
}
</script>
<body>
<button>打开B1页面(获取B1窗口)</button>
<button id="send">发送数据</button>
<button id="iframe">给内联框架发送消息(获取内联B1窗口)</button>
<iframe src="./B1.html" frameborder="0"></iframe> <!-- 内联窗口 -->
</body>
三、对于canvas画布练习
在练习的过程中,第一步是创建画布,然后才能开始下面的操作。
<canvas width="400px" height="400px"></canvas>
1.绘制线性和径向渐变图形
//文档加载完毕执行代码
window.onload = function () {
//.获取画布
var canvas = document.querySelector('canvas');
//2.获取上下文对象 context ---获取画笔
var context = canvas.getContext('2d');
//3.声明一个线性渐变对象 第一二个参数渐变起点 第三四个参数渐变终点
var g = context.createLinearGradient(0,0,400,400);//线性渐变
//var g = context.createRadialGradient(200,200,50,200,200,200); //径向渐变
//4.给渐变对象谈价渐变色 0-1
g.addColorStop(0,'red');
g.addColorStop(0.5,'yellow');
g.addColorStop(1,'cyan');
//5.将线性渐变对象给到填充样式
context.fillStyle = g;
//6.绘制线性渐变矩形
context.fillRect(0,0,400,400);
}
2.绘制图像
window.onload = function () {
//1.获取画布
var canvas = document.querySelector('canvas');
//2.获取上下文对象 context ---获取画笔
var context = canvas.getContext('2d');
//3.创建img节点
var img = new Image();
//4.放图片路径
img.src = '../02.jpg';
//5.绘制图片
img.onload = function () {
context.drawImage(img,0,0,200,200);//img的四个参数 (x,y,宽,高)
}
}
3.绘制视频
window.onload = function () {
//1.获取画布
var canvas = document.querySelector('canvas');
var video = document.querySelector('video');
//2.获取上下文对象 context ---获取画笔
var context = canvas.getContext('2d');
//3.声明一个绘制视频的方法
draw();//调用draw函数
function draw(){
context.drawImage(video,0,0,200,200);
//请求动画帧
requestAnimationFrame(draw);
}
}
在body中设置画布大小并引入视频
<video src="../1.mp4" width="400px" autoplay></video>
4.对于地理位置的练习
注意:练习之前,得打开自己的电脑定位,然后进行下面操作,等待运行时,会弹出对话框,询问是否允许访问,点击允许,然后打开控制台就可以查看自己的地理位置。
//地理位置也叫webapi h5api
navigator.geolocation.getCurrentPosition(function(position){
console.log(position);
})