Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue 刷新保存数据_vuex数据何时清除

vue 刷新保存数据_vuex数据何时清除

作者头像
全栈程序员站长
发布于 2022-11-19 07:31:22
发布于 2022-11-19 07:31:22
1.5K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

在项目中我们通常会遇到这样一个情况,客户不允许把信息存储在 sessionStorage / localStorage 因为这样会暴露一些存储信息,安全起见只能存储在 vuex 里面,但是 vuex 刷新之后 state 里面的信息依旧会被清除,我们的思路是刷新之前把所有的数据存储在 localStorage 里面,刷新后取出里面的数据,并清除 local/session 里面的记录,这种全局的我们可以放在 app.vue 里面,下面是代码实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// app.vue
created(){ 

//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{ 

localStorage.setItem("userComMsg",JSON.stringify(this.$store.state))
});
//在页面加载时读取localStorage里的状态信息
if(localStorage.getItem("userComMsg")){ 

Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userComMsg")));
//使用后清除内存
setTimeout(function () { 

localStorage.removeItem("userComMsg");
},300)
}
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181327.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue3.0商店后台管理系统项目实战-路由守卫(登录状态储存)
Vue3.0官方文档:https://cn.vuejs.org/ Element Plus文档:https://element-plus.gitee.io/zh-CN/
王小婷
2022/10/28
1.4K0
你真的会用vuex吗?
不得不说,vuex真实一个非常好用的库,在vue中起着举足轻重的作用,那么,vuex的作用是什么呢?作为一个新手,我们关心的是在什么样的场景下,应该请出vuex这个大杀器。
老码小张
2019/08/13
1.9K0
你真的会用vuex吗?
3.5 Vuex
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Qwe7
2022/07/21
4420
Vue的问题总结
输出output,查看loader配置 vue inspect > output.js
愤怒的小鸟
2021/02/02
6530
基于vue2.0+vuex+localStorage开发的本地记事本
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。 在线预览地址:DEMO 功能说明 支持回车添加事件 支持事件状态切换
IMWeb前端团队
2017/12/29
1.2K0
圈子系统源码:如何解决VUE页面刷新数据丢失问题
<在Vue项目中,使用Vuex进行状态管理时,页面刷新导致数据丢失是一个常见的问题。这是因为Vuex的状态是存储在内存中的,而当页面刷新时,浏览器会重新加载页面,导致Vuex中的状态被重置。为了解决这个问题,我们可以采用以下几种方法:
菜鸟指南
2025/04/11
1460
圈子系统源码:如何解决VUE页面刷新数据丢失问题
(十三)Vuex 插件系统
一、实现一个状态持久化 说明 可以在页面刷新的时候 vuex 的数据不丢失,增强用户体验 在 store 文件夹下面创建一个 persist.js 的文件来存放插件代码,插件就是接收 store 作为参数的函数,可以做对 mutations actions 的等等一系列操作 (1)、 在页面刷新之前把数据存放到 localStoreage export default function persisState(store) { // 页面刷新之前的操作 // 监听 window.addEv
老怪兽
2023/02/22
3580
vuex刷新后数据消失_如何解决vue修改数据不刷新页面
是不是特别简单,底下存储,上边跟新,但是被忘了,退出该页面时,需要删除存储的值,否则当你再次进入时,存储的还是当前值,一定要记得哦
全栈程序员站长
2022/11/03
2.1K0
Vue 项目:如何解决 router 传递 params 参数,在页面刷新时数据丢失
情况是这样,通常我们会从一个 A 页面跳转到另一个 B 页面,如果这两个页面存在数据交互的话,就会有可能发生数据丢失的情况,来一张图,可能会更加清晰明了:
公众号---人生代码
2020/12/15
2K0
【前端工具类】001-本地存储工具类:LocalStorageUtil
訾博ZiBo
2025/01/06
950
Vue组件通信-下篇
接上篇Vue组件通信-上篇文章介绍了Vue组件基本通信方式,主要解决父子组件通信。本篇文章重点介绍兄弟组件、跨级组件是如何通信的。
测试加
2022/12/03
1.2K0
Vue组件通信-下篇
#Vue 简单的 store 模式
原因:刷新页面时,vue实例重新加载,从而,store也被重置了。store是用来存储组件状态的,而不是用来做本地数据存储的。所以,对于不希望页面刷新之后被重置的数据,使用本地存储来进行存储。
前端小tips
2021/11/25
1.3K0
#Vue 简单的 store 模式
vue项目简书(一)
1. vue数据请求完成之前的'Loading'动画, 它将给用户更好的使用体验. 这里将使用项目中的 loading 动画为例.
生南星
2019/07/22
9250
本地存储之localStorage
  存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。
ProsperLee
2018/10/24
1.7K0
vue2知识点:浏览器本地缓存
<font color='red'>浏览器本地缓存实际是js的知识点,这里只是提一下加深下印象</font>
刘大猫
2024/10/27
1420
Vuex+localStorage数据状态持久化
在前面文章中,我们详细的讲述了Vuex相关的知识,没有了解的小伙伴可以先去了解一波: 《Vuex是什么?Vuex能做什么?Vuex怎么使用?》
Javanx
2019/09/04
2.5K0
Vuex+localStorage数据状态持久化
Vue回炉重造之封装防刷新考试倒计时组件
<!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2}}:{{timerCount1}}</p> <button @click="reset">重新计时</button> </div> </template> <script> export default { name: “Time”, data() { return { timeSeconds: 0, timeMinutes: 0, seco
马克社区
2022/05/18
6650
解决 Vuex 中异步问题:获取最新的 Token 值
在使用 Vuex 管理状态时,有时会遇到异步问题,特别是在获取异步数据并将其保存到 Vuex 中后,立即获取该数据时可能会出现问题。在这篇文章中,我们将讨论如何解决这个问题,并确保在获取 Token 值时始终获取到最新的值。
GeekLiHua
2025/01/21
3280
解决 Vuex 中异步问题:获取最新的 Token 值
一种简单无副作用的同源跨页面数据同步方案
提起这个方案,还要从某个风和日丽的早晨说起。那日小编正忙着手上的各种需求,突然后端的亲火急火燎的找到小编,说是有一个重要的用户,在使用 Word 在线编辑文档功能时,发现保存的文件被篡改了。一听到这,我心想这下摊上事儿了,妥妥的线上故障,但还是故作镇定的开始排查是什么问题。
政采云前端团队
2019/12/20
1.4K0
一种简单无副作用的同源跨页面数据同步方案
vue页面强制刷新缓存不清除_vuex刷新页面数据
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/08
3.5K0
推荐阅读
相关推荐
Vue3.0商店后台管理系统项目实战-路由守卫(登录状态储存)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验