1 created() {
2 if (sessionStorage.getItem('store')) {
3 this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
4 }
5 let isOnIOS = navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i);
6 let eventName = isOnIOS ? 'pagehide' : 'beforeunload';
7
8 window.addEventListener(eventName, () => {
9 sessionStorage.setItem('store', JSON.stringify(this.$store.state));
10 })
11 }

vuex存数据,防止刷新数据丢失的更多相关文章

  1. npm安装vuex及防止页面刷新数据丢失

    npm install vuex 在项目scr目录下新建store文件夹,在store文件夹下新建index.js文件. import Vue from 'vue'; import Vuex from ...

  2. Vuex数据页面刷新丢失问题解决方案

    用Vue做项目开发很久了,对于vuex能用.会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还 ...

  3. 解决vuex的数据刷新(F5)后会被初始化的问题

    介绍一个vuex的数据刷新(F5)后会被初始化的问题处理的插件:vuex-localstorage 实现的原理大概就是监听浏览器的刷新,关闭事件,把vuex的值存储到本地localstorage,刷新 ...

  4. vuex页面刷新数据丢失的解决办法

    在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...

  5. 解决vuex数据页面刷新后初始化问题

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 ...

  6. vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  7. ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理

    分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...

  8. Package设计1:选择数据类型、暂存数据和并发

    SSIS 设计系列: Package设计1:选择数据类型.暂存数据和并发 Package设计2:增量更新 Package 设计3:数据源的提取和使用暂存 一,数据类型的选择 对于SSIS的数据类型,容 ...

  9. innodb是如何存数据的?yyds

    前言 如果你使用过mysql数据库,对它的存储引擎:innodb,一定不会感到陌生. 众所周知,在mysql8以前,默认的存储引擎是:myslam.但mysql8之后,默认的存储引擎已经变成了:inn ...

随机推荐

  1. HTML ASCII 参考手册

    HTML 和 XHTML 用标准的 7 比特 ASCII 代码在网络上传输数据. 7 比特 ASCII 代码可提供 128 个不同的字符值. 7 比特 可显示的 ASCII 代码 结果 描述 实体编号 ...

  2. 简单的使用Qt的QCustomplot画图

    一.新建一个widget工程 二.将Qcustomplot文件复制到项目下 三.右键qt项目增加已存在的文件 四.在.pro中添加 QT += widgets printsupport 五.在.h中添 ...

  3. [Android开发] 代码code设置9.png/9-patch 图片背景后,此view中的TextView等控件显示不正常(常见于listview中)

    == 0) { convertView.setBackgroundResource(R.drawable.list_gray_9); } else { convertView.setBackgroun ...

  4. AutoCAD二次开发-使用ObjectARX向导创建应用程序(HelloWorld例子)

    AutoCAD2007+vs2005 首先自己去网上搜索下载AutoCAD2007的ARX开发包. 解压后如下 打开后如下 classmap文件夹为C++类和.net类的框架图,是一个DWG文件. d ...

  5. java Logger 类

    package org.rx.common; import org.slf4j.LoggerFactory; import java.util.Collections; import java.uti ...

  6. JVM简介及类加载机制(一)

    JVM介绍: 目标:JVM运行字节码文件,根据JVM的日志调节程序,对于底层原理有一定的了解 1. 类加载 在JAVA代码中,类型的加载,连接与初始化都是在程序运行期间完成的,提供了灵活性增加了更多的 ...

  7. 如何使用Intellij IDEA工具导入SVN项目

    Intellij IDEA是目前主流的IDE开发工具,工程项目导入也是必不可少的操作,本文讲述如何用 IDEA工具导入SVN项目. 步骤一:选择VCS打开Intellij IDEA开发工具,在导航栏中 ...

  8. 进程共享变量#pragma data_seg用法

    #pragma data_seg介绍 用#pragma data_seg建立一个新的数据段并定义共享数据,其具体格式为: #pragma data_seg ("shareddata" ...

  9. CDH5..4.7+phoenix实现查询HBase异常:java.sql.SQLException: ERROR 1102 (XCL02): Cannot get all table regions

    基础环境是用CM 安装的cdh5.4.7,phoenix使用的版本是phoenix-4.5.2-HBase-1.0-bin. 出现异常信息:java.sql.SQLException: ERROR 1 ...

  10. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...