【Vue】replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题

最新推荐文章于 2024-03-07 18:45:53 发布

Milk595

最新推荐文章于 2024-03-07 18:45:53 发布

阅读量1.3k

点赞数 1

分类专栏： Vue.js 文章标签： 1024程序员节 vue 解决页面刷新数据丢失问题

本文链接：https://blog.csdn.net/weixin_43352901/article/details/109267096

版权

replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题（状态丢失）

文件目录

在这里插入图片描述

利用 pagehide 事件在用户刷新页面时将vuex的store存入sessionstorage中，然后在页面加载时，从sessionstorage中获取，replaceState store

  created() {
   
    // 在页面加载时读取sessionStorage里的状态信息
    let store = window.sessionStorage.getItem("store");
    if (store !== null) {
   
      this.$store.replaceState(
        Object.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Milk595

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vuex页面刷新保存数据到sessionstorage中，以及需要注意的问题

believet93的博客

05-14

7009

1、vuex页面刷新保存数据到sessionstorage中（参考其他博客https://blog.csdn.net/guzhao593/article/details/81435342），在App.vue中添加如下代码 created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem...

vue系统跳转session失效问题_解决Linux系统中jupyter notebook启动时，无法自动跳转浏览器的问题...

weixin_34551614的博客

01-22

337

1.问题描述：实验室的服务器是ubuntu系统，我使用的是普通用户账号，没有root权限。只能使用命令模式，不能使用图形界面。我安装好Anaconda之后，启动jupyter notebook时，无法自动启动浏览器。2.解决方法：2.1解决浏览器的问题如果服务器上有安装好的浏览器并且你知道浏览器安装的位置，那么你就忽略这2.1这一步。如果服务器上有安装好的浏览器，但是你不知道浏览器在哪，或者服务器...

4 条评论您还未登录，请先登录后发表或查看评论

【Vue】vuex冷门实例方法--replaceState

Milk~每天分享一点点，技术进步一点点

10-25

4929

vuex冷门实例方法–replaceState 状态合并看这段代码： if (sessionStorage.getItem("store")) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store")))) console.log('正在从sessionStorage恢复store') console.log(this.$store.st

vue-router 路由 pushstate replacestate popstate 详解

weixin_43856422的博客

10-21

3175

如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。使用虚拟路由的时候，angular 13的drawer 组件监听 popstate 的变化，会清空drawer内容，造成的问题。将当前URL和history.state加入到history中，并用新的state和URL替换当前。state：与要跳转到的URL对应的状态信息。

vuex实例方法replaceState解决vuex页面刷新数据丢失问题

weixin_42349568的博客

02-08

2496

一，概述在我们使用vuex的时候，常常遇到的问题就是，在页面刷新之后，vuex中的数据丢失。但其实这不是数据丢失，实际上是vuex重新创建实例，把数据初始化了。为了避免这种情况，需要将vuex数据持久化。二，store.replaceState实现vuex数据持久化实现vuex的数据持久化，可以重新发请求获取数据，也可以使用插件，还可以利用浏览器本地存储。但归根到底，就是让vuex重新初始化之后，再次拥有数据。于是，就可以灵活地选择这三种方案，这里我就写store.replaceState结合浏览

vue中使用history.replaceState 更改url vue router 无法感知的问题

Gleason

09-15

1720

最近做一个需求，URL更新不刷新页面，在网上找了好多文章都说更新URL不会刷新页面（前提是路由为history模式），我也用了，一开始是没问题的,可以实现需求，但是后来URL变得越来越复杂，会导致URL更新时，会触发mounted执行,这样的话页面就会刷新，后来更换了API 更新URL，页面确实不刷新了，但是也带来了新的问题，就是 vue router 无法感知到URL的变化，举个例子吧。

使用vuex解决刷新页面state数据消失的问题记录

10-17

然而，一个常见的问题是，当用户刷新页面时，Vuex中的state数据会丢失，因为Vuex的状态不会自动持久化。这篇内容将探讨如何解决这个问题。首先，我们要理解Vuex的优势和劣势。Vuex的优势在于提供了一个集中式存储...

解决vue刷新页面以后丢失store的数据问题

10-14

本篇文章将详细介绍如何解决Vue刷新页面后丢失store数据的问题。首先，我们需要理解，当浏览器刷新页面时，JavaScript运行环境会被重置，包括Vue实例和Vuex store。为了在刷新后恢复store的状态，我们可以利用...

vue页面刷新问题：返回之前打开的页面，走了create方法（解决）

最新发布

谷咕咕

03-07

606

我们在开发的时候经常会复制粘贴，导致vue文件的name没有及时修改。我们需要保证name和浏览器的地址一致，这样才能实现缓存。切记设置name必须跟url名字相同。不过谷咕咕发现好像首字母大写也没事。

vue页面监听localstorage_监听history.push/replaceState和local/sessionStorage变化

weixin_35827472的博客

02-03

1189

前端路由我们都已经很熟悉了，像Vue、React等一些MVVM框架都提供了前端路由支持，使得前端开发更加独立高效。前端路由的原理我们都知道，一般面试的时候也经常会被问起。我们一般都会回答：前端路由有两种，一种是 hash 模式，原理是监听 window 上的 onhashchange 事件来实现视图更新，一种是 history 模式，原理是使用 history.pushState/replaceS...

解决vue页面刷新或者后退参数丢失的问题

11-29

在toB的项目中，会经常遇到列表数据筛选查询的情景，当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），选择的筛选条件会全部丢失，辛辛苦苦选择好的条件全没了，还得重新选择，如果有分页的更头大，还得重新一页页翻到之前看到的那一页，用户体验极度不友好。我的解决有两种：第一种方法：用vue 的<keep>，即在<router>外套一层<keep>。虽然可以达到一定效果，但是控制起来比较麻烦，比如项目中并不是所有页面都需要缓存，代码写起来复杂第二种方法：直接用localStorage，简单粗暴（推荐）代码如下： list.vue export de

登录注册 vuex \ sessionStorage、localStorage token cookie session 区别 a标签新窗口打开页面跳转sessionStorage丢失

weixin_50885665的博客

04-10

897

这个问题是今天被面试官问道，面试官当时说的话大概意思是，多个网页打开的是同一个网页时，他们使用了同一个sessionStorage，某个页面关闭了，问我其他页面的sessionStorage会不会被清除！例如: 点击新闻 ---- 新窗口打开一个页面 --- 在新窗口打开的页面里用vuex设置的state,原来的新闻页获取不到(用watch也监控不到) ---- 原因是新窗口打开的。2、通过token方式选2 ---- 如果前端和服务器之间存在跨域问题,推荐用。

vuex中的store.replaceState()

qq_34123564的博客

05-16

1万+

关于vuex vuex是在使用vue-cli脚手架开发过程中常用的一种状态管理模式+库。它充当应用程序中所有组件的集中存储。我们可以使用它来进行非父子组件之间的传值。具体用法就不在这里赘述了大家可以参考官方文档vuex官网遇到的问题在最近的学习中，博主需要在vue-cli脚手架的项目中同时使用vuex与iframe，并且需要在主页面改变vuex内相应的值之后在iframe内能够实时的看到对应的变化，话不多说上代码。 home.vue <template> <div class=

history pushstate 和 replaceState

weixin_37359069的博客

04-03

861

原文网址，感谢作者：https://blog.csdn.net/wulex/article/details/72843494图解一下，个人理解了很多，看了很多博客。

【vue3.0学习】生命周期

qq_43806488的博客

12-24

472

回顾vue2.0生命周期 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed vue3.0生命周期 setup 创建实例前 onBeforeMount 挂载DOM前 onMounted 挂载DOM后 onBeforeUpdate 更新组件前 onUpdated 更新组件后 onBeforeUnmount 卸载销毁前 onUnmounted 卸载销毁后验证代码 <temp

【Bug小记】页面刷新后获取不到sessionstorage数据

sunshine641的博客

11-02

2313

最近在做微信公众号遇到的问题： vue项目第三方发布到微信公众号上再点击刷新后，页面加载访问后台接口获取不到token。检查发现是因为从sessionstorage取的token值为null。开始还以为是刷新导致的数据丢失，所以一直在尝试保存数据，没能解决问题。最后找来找去发现是路由问题，搭建项目的大哥在配置路由时，修改了默认路径，导致刷新后路由跳转到了url。最后删掉了配置，就可以了。。。。啧 ...

Vuex数据状态持久化