web存储和通信（cookies、webStorage）

最新推荐文章于 2022-05-11 11:17:11 发布

谦谦q

最新推荐文章于 2022-05-11 11:17:11 发布

阅读量179

点赞数

分类专栏： jQuery web存储文章标签： jquery

本文链接：https://blog.csdn.net/hey_myx/article/details/120332373

版权

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

web存储

1 篇文章 0 订阅

订阅专栏

上文：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);
       })

谦谦q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web存储和通信（cookies、webStorage）

上文：https://blog.csdn.net/hey_myx/article/details/120308078对于上文的补充总结
复制链接

扫一扫

专栏目录