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. go声明和初始化

    go声明和初始化 当我们第一次看见变量和声明时,我们仅仅看见一些内置的类型,比如整型和字符串.现在我们将学习结构体,并且我们会深入学习包括指针的内容. 通过一种最简单的方式去创建一个结构体值类型: g ...

  2. Python 爬取各大代理IP网站(元类封装)

    import requests from pyquery import PyQuery as pq base_headers = { 'User-Agent': 'Mozilla/5.0 (Windo ...

  3. RichView

    TRichView中文文档 TRichView 是Delphi/C++Builder  控件,主要用于显示.编辑和打印超文本文档. 新版本解决多个兼容性问题,更新了字符串标签.剪贴板.RTF和DB组件 ...

  4. 【系统安全性】二、Web攻击与防范

    二.Web攻击与防范 1.XSS攻击 跨站脚本攻击(Cross Site Scripting),因为简写CSS,与层叠样式表(Cascading Style Sheets)有歧义,所以取名XSS 原理 ...

  5. Django Shell 如何对数据库进行测试

    Django 如何对数据库进行测试 Python manager.py shell Import django django.setup() from my_app.models import * 开 ...

  6. POJ 1269 Intersecting Lines (判断直线位置关系)

    题目链接:POJ 1269 Problem Description We all know that a pair of distinct points on a plane defines a li ...

  7. Django框架(二)—— 基本配置:app注册、模板配置、静态文件配置、数据库连接配置post和get

    目录 app注册.模板配置.静态文件配置.数据库连接配置post和get 一.app 二.模板配置 三.静态文件配置 四.数据库连接配置 五.get请求和post请求 六.新手三件套 七.登录功能案例 ...

  8. http over git server

    编译安装git 参考 <CentOS7编译安装git> 安装httpd yum install httpd -y 安装gitweb yum install gitweb -y 创建项目根目 ...

  9. WebStorage篇

    [WebStorage篇] 用户登录状态.计数器或者小游戏等,但是又不希望用到数据库,就可以利用Web Storage技术将数据存储在用户浏览器中. Web Storage是一种将少量数据存储在客户端 ...

  10. [已解决]Series object has no attribute explode

    报错代码 s = pd.Series([[1, 2, 3], 'foo', [], [3, 4]]) s 0 [1, 2, 3] 1 foo 2 [] 3 [3, 4] dtype: object s ...