前端的页面间进行值的传递(代码片段)

SmallCuteMonkey SmallCuteMonkey     2022-12-22     606

关键词:

Cookie和locaStorage可以进行前端页面间值的传递

Cookie浏览器端的缓存文件,缓存的大小受到浏览器的限制。
locaStorage为也存储更大的容量数据。
区别:Cookie可以和后端进行传值,localStorage不可以

使用:(自定义封装一个js,cookie_utils.js)

var opertor="=";

function getCookieValue(keyStr)
	
	
	var s=window.document.cookie;
	var arr=s.split("; ");
for(var i=0;i<arr.length;i++)
	var str=arr[i];

	var k=str.split(opertor)[0];
	var v=str.split(opertor)[1];
	if(k==keyStr)

		value=v;
		break;
	

	

return value;






function setCookieValue(key,value)

	document.cookie=key+opertor+value;




A页面设置值:

function(res)
	  console.log(res);
	  if(res.code==1000)
// 获取前端传过来的数据 data
		var userInfo=res.data;
		// cookie和localstorage可以进行前端的页面之间的传值
	setCookieValue("username",userInfo.username);
	setCookieValue("userImg",userInfo.userImg);

		window.location.href="index.html";
	  else

		$("#tips").html("<label style='color:red'>"+ res.msg +"</label>");




	  

B页面取值:


var name=getCookieValue("username");
 var userImg=getCookieValue("userImg");
 console.log(name+userImg);

localStorage:

A页面:

localStorage.setItem("user",JsonStringify(userInfo))

B页面:


var jsonStr=localStorage.getItem("user");

// 把json串转换为对象
var userInfo=eval("("+jsonStr+")");


// 把取到的值消失
localStorage.removeItem("user");
console.log(userInfo);

前端领域高频笔试面试——vue相关(代码片段)

目录1.v-if和v-show区别2.vue常用的修饰符3.vue中key值的作用4.vue的单页面应用(SPA)的优缺点5.Vue的生命周期6.Vue组件间的参数传递7.为什么vue中data必须是一个函数?8.对MVVM模式的理解9.vue-router有哪几种导航钩子?10.路由嵌... 查看详情

postmessage页面间消息传递(代码片段)

...out(()=>targetwindow.postMessage(JSON.stringify(message),\'/\'),1000);2.页面消息接收created()window.addEventListener(\'message\',this.onMessageChange),//监听变化onMessageChange(e)letdata=e.dataif(data)letinfo=tryinfo=JSON.parse(data)catch(error)info=dataif(info&&info.name==\'ifr... 查看详情

php页面传值的方法(转)(代码片段)

原文链接:https://www.cnblogs.com/suvllian/p/5582540.html PHP页面间传值的几种方法  方法一:require_once//Pagea:<?php$a="hello";?>//Pageb:<?phprequire_once"A.php";echo$a."world!";?>  访问b.php会得到:helloworl 查看详情

3.2路由分发应用(代码片段)

1.微前端是什么微前端主要借鉴后端微服务的概念。简单地说,就是将一个巨无霸(Monolith)的前端工程拆分成一个一个的小工程。它们完全具备独立的开发、运行能力。整个系统就将由这些小工程协同合作,实现所有页面的展... 查看详情

vue非父子组件通信方案(代码片段)

...子组件触发的事件)向父组件传递信息。但是当我们需要进行非父子组件间的通信或者是父子组件间的通信需要层层传递过于复杂时就需要使用非父子组件通信方案来进行组件间信息的传递:下面是常见的两种非父子组件通信方... 查看详情

vue~父组件与子组件的交互(代码片段)

...行抽象,然后生成一个独立的组件,这个组件可以被其它页面引用,如果希望有交互的动作就设计到了值的传递,或者方法的回调等问题,这一次我们主要来说一下父组件和子组件的交互。值的传递子组件,通过定义了prods,然... 查看详情

cookie操作介绍(代码片段)

Web开发中,经常会遇到页面之间进行传值的操作,必须通过服务器,使用url传值、隐藏表单方法均能实现。我们假设,页面1中定义一个变量,需要传输到页面2中,要求值的数据不被看到,使用url传值是通过url方法,传递的数据... 查看详情

如何实现electron多页面间通信(代码片段)

如何实现electron多页面间通信1,业务需求:总共有两个页面,页面A显示数据,页面B处理数据,主线程Main2,实现的技术方案:在主线程中打开页面A和B,B页面不进行显示,主要负责处理从A页面发送到主线程Main上的数据,然后B... 查看详情

封装两个js从url获取相关参数的值和设置前端页面的cookie和获取cookie的值(代码片段)

url.js//这个是把前端的路径进行页面之间传值的获取js,可以在页面之间进行相关的传值functiongetUrlParm(key)//这样可以让中文进行显示varurl=decodeURI(window.location.toString());vararr=url.split("?");if(arr.length>1)varparams=a 查看详情

sass产品-定制化与本地化(代码片段)

1.微前端是什么微前端主要借鉴后端微服务的概念。简单地说,就是将一个巨无霸(Monolith)的前端工程拆分成一个一个的小工程。它们完全具备独立的开发、运行能力。整个系统就将由这些小工程协同合作,实现所有页面的展... 查看详情

如何进行前后端分离

...的框架的情况下,前后端分离应该如何做?需求是这样:前端写html页面(非单页面应用),index.html首页about.html关于我们newslist.html新闻列表newsdetail.html新闻详情productlist.html产品列表productdetail.html产品详情后台只提供json数据那么... 查看详情

asp.netpost,frombody接参总是null空值.webapi前端传递是有值的,怎么回事?(代码片段)

遇到一个常见错误,前端Post传递data:array:[1,2,3],但是API接收的一直是nullAPI方法postApi([FromBody]int[]array,[FromUri]intnum)Debug过程F12检查数据传递结构,没有问题尝试排除法,只保留[FormBody]。postApi([FromBody]int[]array)还是不行。根据网络... 查看详情

前端的elementui表格里面的编辑前后的值的获取(代码片段)

文章目录1.点击修改按钮获取之前的值:2.在修改事件里面进行获取值注意不可以直接this.oldRow=row3.保存的时候获取新的值和旧的值4.使用的打印看看,原来的表格里面的没有编辑的值,和修改之后的值。1.点击修改... 查看详情

前端开发react中父子组件之间的通信方式(代码片段)

文章目录一.父组件传递子组件1.子组件是class组件1.子组件是function组件二.子组件传递父组件一.父组件传递子组件在react中父组件传递子组件中,主要的实现方式:父组件通过属性=值的形式来传递给子组件数据;子... 查看详情

react中组件间通信的几种方式(代码片段)

在使用React的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况:父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信1.父组件向子组件通信父组件通过向子组件传... 查看详情

vue-动态修改路由的params和query参数(代码片段)

在开发过程中,我们可能会遇到如下情况:B页面需要通过路由携带的参数进行一些判断,如果此时在B页面中修改了该值,但是此时刷新页面该参数的值未变,这是因为页面刷新后,该值的值会等于路由中... 查看详情

vue组件间进行通信(代码片段)

一、父组件与子组件通信父组件与子组件通信段桥梁是子组建的props属性,通过属性绑定的方式,将父组件的数据传到子组件的props中,子组件在内部使用这些数据。HTML部分<divid="app"><!--父组件将fruit传递给f--><... 查看详情

vue续集2(代码片段)

1.前端路由1.1为什么做单页面应用(1)传统的开发方式url改变后,立马发送请求,响应整个页面,有可能资源过多,传统开发会让前端的页面出现“白屏”用户体验不好(2)SPA单页面应用:锚点值的改变后,不会立刻发送请求... 查看详情