首页 > 其他分享 >关于项目开发中遇到的难点问题-vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题

关于项目开发中遇到的难点问题-vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题

时间:2023-07-21 16:34:29浏览次数:39  
标签:vue 浏览器 sessionStorage params 新窗口 关闭 页面

  • vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题。
  1. 问题描述:项目中A页面有table列表,在列表上方有“导入文件”按钮,点击按钮后需在浏览器新窗口中打开B页面,在B页面进行选择文件上传xlsx数据经过一系列校验后,将最终确定的数据返回回显在A页面,并且关闭当前窗口。如果将数据内容存储在sessionStorage中,关闭页面后,A页面并不能获取到内容。所以需要在A页面的create中进行监听操作。
  2. 解决方案

   B页面:params:为需要传给A页面的参数内容,“uploadBussiness”是自己定义的监听的事件的名称

  window.opener.postMessage(

    {name:"uploadBussiness",params:params},window.location  

  )

  A页面:

created(){

  let that = this

  window.addEventListener("message",function(e){

    if( e.data.name == "uploadBussiness"){

      // A页面已经能获取到穿回来的数据内容

      that.businessInfo.tableList = e.data.params

    }

  })

}

  3. 项目中截图

  B页面:

 

  A页面:

 

标签:vue,浏览器,sessionStorage,params,新窗口,关闭,页面
From: https://www.cnblogs.com/evident/p/17571785.html

相关文章

  • vue3组合式 API_为 computed() 标注类型
    computed() 会自动从其计算函数的返回值上推导出类型<template><h3>{{doubleCount}}</h3></template><scriptsetuplang="ts">import{ref,computed}from"vue"constcount=ref<number>(100)//推导得到的类型:ComputedRef&l......
  • vue contenteditable编辑模式下,样式不生效
    换行后生成div,设置的样式没有生效 ***原因style标签上设置了scoped解决办法1、去掉style的scoped属性2、额外写一个style,不加scoped(vue支持多个style)<divclass="mainText-body"contenteditable="true"></div><stylelang="less"scoped>//删除......
  • vue3中组合式 API_为 reactive() 标注类型
    reactive() 也会隐式地从它的参数中推导类型<template><h3>{{book.title}}</h3><h3>{{book.author}}</h3></template><scriptsetuplang="ts">import{reactive}from"vue"constbook=reactive({title......
  • Vue3 响应式全局对象json 动态绑定界面三 (Div块样式 字符串叠加)
    效果 man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({missedCallData:"",currentUserTel:"",})app.provide('globalData',globalData);在main.js的函数中改变missedCallData 的值从而改变界面列表//改变全局变量gl......
  • Vue3 响应式全局对象json 动态绑定界面四 (Div块样式 Json数据绑定)
    效果man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({extTelTalkData:[{userExten:"1000",userName:"刘亦菲",callStatus:"通话"},{......
  • python3 爬取 vue-ssr数据
    使用Python3爬取Vue-SSR数据介绍在Web开发中,Vue-SSR(VueServerSideRendering)是一种将Vue.js应用程序在服务器端进行渲染的技术。它允许搜索引擎爬取到完整的HTML页面,这对于SEO(搜索引擎优化)非常重要。本文将介绍如何使用Python3爬取Vue-SSR数据的方法,并提供相应的代码示例。准......
  • Vue3 响应式全局对象json 动态绑定界面二 (方块矩阵样式)
    效果main.js//全局对象constglobalData=reactive({extTelMonitorData:[{title:'用户组一',list:[{groupID:"0",groupName:"AllUsers",......
  • VUE|组件基础
    1快速体验步聚定义组件导入组件引用组件语法<template>模板</template><scriptsetup>//逻辑</script><style>/*样式*/</style>1)定义组件在components目录下,创建组件文件TheCounter.vue<template><!--组件的模板部分-->计数器:{{c......
  • VUE|组合式API
    VUE|组合式API1setup语法糖在vue项目中,通常使用setup语法简化书写setup的特点在setup语法中定义变量,可以直接在模板中使用在setup语法中定义函数,可以直接在模板中使用导入的组件对象,可以直接在模板中使用常用的组合式APIrefcomputedwatchonMounted2ref......
  • VUE|侦听器
    1侦听器1)什么是侦听器可以通过watch配置项,监听已经存在的属性的改变2)语法watch:{//监听data中的firstName属性firstName(){//执行一系列的操作},},watch:{//监听data中的firstName属性firstName(){//执行一系列的操作},},示例......