vue params传参刷新网页数据丢失解决方法

这里有一段代码,我想让它刷新网页数据不会丢失的同时,还不希望数据显示在url地址里。

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})接收数据页面A:
val:JSON.parse(this.$route.params.val)这时刷新页面A,val就会报错undefined

1,当使用 query传参时,由于数据是拼接在url地址后面的,所以刷新网页不会导致数据丢失。

发送数据页面Q:
this.$router.push({name:'A',query:{val:JSON.stringify(val)}})接收数据页面A:
val:JSON.parse(this.$route.query.val)页面A地址:xxx/A?val=xxxxxxxxxxxxxx
这时刷新页面A,数据正常存在,但是页面地址会变得很长,而且传递的数据也会暴露在外面。

 上面的做法虽然满足了刷新网页数据不丢失,但是没满足第二个条件,数据出现在url地址里了。所以不太好。

2,使用params传参,数据不会出现在url地址里。

最开始的代码就是使用的params传参,这样虽然可以让数据不出现在url地址里,但是刷新网页会导致数据丢失。所以也不太好。

那怎么样才能实现呢?

1:在vue 里 使用浏览器直接刷新网页是不会触发vue生命周期里beforeDestory destoryed 这两个函数的。因为浏览器直接刷新页面就相当于再次访问一遍这个网址。跟vue生命周期没关系的。

2:localStorage和sessionStorage 的区别

存储在localStorage里的数据如果不是主动去清除的话,就算浏览器关闭了,下次打开浏览器他还是会存在。是一个长期的存在。

存储在sessionStorage 里的数据只要关闭浏览器就会自动清除。但是刷新网页不会清除。是一个临时的存在。

基于以上两个知识点,可以利用vue里浏览器刷新不会触发beforeDestory生命周期函数和数据储存本地这两个方法来补全params刷新丢失数据的短板。

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})接收数据页面A:
val:this.$route.params.val==undefined?undefined:(JSON.parse(this.$route.params.val) || JSON.parse(sessionStorage.getItem('musicList')))
//params.val是否等于undefined?若为true则val赋值为undefined,若为false则利用短路运算符,若存在this.$route.params.val 则赋值给 val,若不存在则从sessionStorage里找数据赋值给val //虽然浏览器刷新不会触发destory,但是会每次触发created。 
created(){//若条件为false则表示没存储过该数据。是第一次进入该页面。那么就把数据存入本地。if(Boolean(sessionStorage.getItem('musicList')) == false) {// 数据储存在本地存储里 sessionStorage.setItem('musicList', JSON.stringify(this.Id))}//若val==undefined则表示,该页面刷新过了。params数据没了。那么就从本地找出数据再赋值给valif(this.val==undefined){this.val= JSON.parse(sessionStorage.getItem('musicList'))}
}//当正常的从这个页面跳转到其他页面的时候会触发该函数,切到其他页面的时候就把该数据从本地存储删掉即可
beforeDestory(){sessionStorage.removeItem('musicList')
}

上面没用到localStorage是因为如果用户跳转到页面A后,直接关闭浏览器,再打开浏览器输入网址,就能从本地存储找到该数据,但是sessionStorage关闭浏览器,数据就消失了。不会出现localStorage的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/15743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bigemap工程工程行业应用

客户目前主要是需求为使用下载卫星图、等高线、水系、路网等等元素数据做线路规划图 其他信息 客户需要的图中还包含一些农作物以及需要在软件上标注带有箭头的线段(不能满足) 如下图: 使用场景: 目前主要为制图、规划线路等等…

1.1.2 SpringCloud 版本问题

目录 版本标识 版本类型 查看对应版本 版本兼容的权威——官网: 具体的版本匹配支持信息可以查看 总结 在将Spring Cloud集成到Spring Boot项目中时,确保选择正确的Spring Cloud版本和兼容性是非常重要的。由于Spring Cloud存在多个版本,因此…

力扣 509. 斐波那契数

题目来源:https://leetcode.cn/problems/fibonacci-number/description/ C题解1:根据题意,直接用递归函数。 class Solution { public:int fib(int n) {if(n 0) return 0;else if(n 1) return 1;else return(fib(n-1) fib(n-2));} }; C题…

socket 基础

Socket是什么呢? ① Socket通常也称作“套接字”,用于描述IP地址和端口,是一个通信链的句柄。应用程序通常通过“套接字”向网络发出请求或者应答网络请求。 ② Socket是连接运行在网络上的两个程序间的双向通信的端点。 ③ 网络通讯其实指…

第九十三回 在Flutter中mock数据

文章目录 概念介绍使用方法示例代码 我们在上一章回中介绍了"在Flutter中解析JSON数据"相关的内容,本章回中将介绍 如何mock数据.闲话休提,让我们一起Talk Flutter吧。 概念介绍 我们在本章回中介绍的mock数据主要是通过相关的代码模拟服务器…

【Go语言】Golang保姆级入门教程 Go初学者介绍chapter1

Golang 开山篇 Golang的学习方向 区块链研发工程师: 去中心化 虚拟货币 金融 Go服务器端、游戏软件工程师 : C C 处理日志 数据打包 文件系统 数据处理 很厉害 处理大并发 Golang分布式、云计算软件工程师:盛大云 cdn 京东 消息推送 分布式文…

【RabbitMQ】golang客户端教程2——工作队列

任务队列/工作队列 在上一个教程中,我们编写程序从命名的队列发送和接收消息。在这一节中,我们将创建一个工作队列,该队列将用于在多个工人之间分配耗时的任务。 工作队列(又称任务队列)的主要思想是避免立即执行某些…

Redis 异常处理:连接失败、数据库满、缓存雪崩、缓存击穿和缓存穿透

目录 1. 连接失败2. 数据库满3. 缓存雪崩4. 缓存击穿:5. 缓存穿透: Redis使用过程中,可能会遇到各种异常情况,例如:连接失败、数据库满、缓存雪崩、缓存击穿和缓存穿透等。这些异常情况可能会导致系统崩溃,…

pip安装lap出现问题

解决方法一 用conda安装,用以下命令: conda install -c conda-forge lap解决方法二 用pip安装,用以下命令: pip install gitgit://github.com/gatagat/lap.git文章目录 解决方法一解决方法二摘要YoloV8改进策略:基…

opencv介绍及环境搭建

文章目录 前言一、opencv介绍二、开发环境搭建三、测试总结前言 本篇文章开始学习opencv的知识,opencv主要用于图像处理和识别,在生活中到处都是可以见到的,那么本篇文章就正式带大家来学习opencv。 一、opencv介绍 OpenCV(Open Source Computer Vision Library)是一个…

P5718 【深基4.例2】找最小值

题目描述 给出 n n n 和 n n n 个整数 a i a_i ai​,求这 n n n 个整数中最小值是什么。 输入格式 第一行输入一个正整数 n n n,表示数字个数。 第二行输入 n n n 个非负整数,表示 a 1 , a 2 … a n a_1,a_2 \dots a_n a1​,a2​……

短视频矩阵源码

一、短视频矩阵源码搭建解析: 目录 一、短视频矩阵源码搭建解析: 二、短视频矩阵源码的开发路径分享: 三、短视频矩阵系统开发应具备哪些能力? 短视频技术开发能力: 开发人员应具备短视频相关技术能力&#xff0c…

Vcenter 创建 虚拟机配置 Thin Provision 模式 disk

介绍 在vCenter中选择虚拟磁盘格式通常也取决于您的需求和使用情况。 vSphere支持多种虚拟磁盘格式,以下是一些常见的格式: Thick Provision Lazy Zeroed:这是vSphere中的默认格式。它会预分配虚拟磁盘所需的存储空间,但只有在虚…

深度学习(32)——CycleGAN

深度学习(32)——CycleGAN 文章目录 深度学习(32)——CycleGAN1. GAN原理2. CycleGAN(1)原理(2)核心思想(3)优点(4)缺点(5…

安全测试国家标准解读——并发程序安全

本系列文章主要围绕《GB/T 38674—2020 信息安全技术 应用软件安全编程指南》进行讲解,该标准是2020年4月28日,由国家市场监督管理总局、国家标准化管理委员会发布,2020年11月01日开始实施。我们对该标准中一些常见的漏洞进行了梳理&#xff…

clickhouse MPPDB数据库 运维实用SQL总结III

文章目录 CH问题处理使用remote函数报URL "xxxx:9000" is not allowed in configuration fileclickhouse MPPDB数据库 运维实用SQL总结 clickhouse MPPDB数据库 运维实用SQL总结II clickhouse MPPDB数据库 运维实用SQL总结III CH server相关的配置参见 : clickhous…

2023最新Ubuntu安装部署Gitlab详细教程(每个步骤均配图)

Ubuntu安装配置Gitlab详细步骤 安装依赖 打开终端,运行如下命令: sudo apt updatesudo apt-get upgradesudo apt-get install curl openssh-server ca-certificates postfix接下来会遇到如下界面,Tab切换到“确定”按钮,然后回…

Tomcat 安装配置教程及成功后,启动失败报错解决方案

解决方案 我的报错原因是因为我的JDK是1.8的而我的Tomcat是10版本的,可能是因为版本原因吧,我重新装了Tomcat 9就可以启动成功了! 简单说下安装的时候需要注意哪些步骤吧 今天我在安装tomcat10的时候,安装成功后,启…

RT1052的定时器

文章目录 1 通用定时器1.1 定时器框图1.2 实现周期性中断 2 相关寄存器3 定时器配置3.1 时钟使能3.2 初始化GPT1定时器3.2.1 base3.2.2 initConfig3.2.2.1 clockSorce3.2.2.2 divider3.2.2.3 enablexxxxx 3.3 设置 GPT1 比较值3.3.1 base3.3.2 channel3.3.3 value 3.4 设置 GPT…

分布式存储Ceph部署

前言 Ceph 和 GlusterFS 都是出色的分布式存储,其中Ceph 广泛由于Openstack以及K8S。 官网 ## 官网 https://docs.ceph.com/en/quincy/## 参考文档 https://zhuanlan.zhihu.com/p/386560160