当前位置: 首页>前端>正文

全栈的自我修养 ———— vuex处理数据消失(由于pc端和移动端的差异,beforeunload带来的巨坑!!!)

一天小编在写一个有关处理vueX数据刷新时丢失的一个工具类,具体如下

// tool.js
import store from "@/store";
export async function restoreStore() {
  const savedData = JSON.parse(localStorage.getItem("myData"));
  window.addEventListener("beforeunload", () => {
    localStorage.setItem("myData", JSON.stringify(store.state));
  });
  localStorage.removeItem('myData')
  if (savedData) {
    store.replaceState(savedData);
  }
}
new Vue({
  router,
  store,
  render: (h) => h(App),
  created() {
    restoreStore()
  },
}).$mount("#app");
思路就是:
   1、监听beforeunload发生时将当时vueX的信息转大json并保存在本地
   2、当页面加载时触发restoreStore方法从而取回vueX里的信息

写完后没感觉哪里有问题,电脑调试也没问题,但是后来用手机查看网页时候我人傻了,vueX保存的工具类竟然没有发生?!

当时我小脑就萎缩了,后来经过小编的不断调试终于发现了问题所在!!

beforeunload是不被移动端支持的,需要替换成pagehide

解释:
pageshow事件:这个事件在用户浏览网页时触发,pageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发,pageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。

后改如下,问题终于得到解决!

import store from "@/store";
export async function restoreStore() {
  const savedData = JSON.parse(localStorage.getItem("myData"));
  window.addEventListener("pagehide", () => {
    localStorage.setItem("myData", JSON.stringify(store.state));
  });
  localStorage.removeItem('myData')
  if (savedData) {
    store.replaceState(savedData);
  }
}


https://www.xamrdz.com/web/23n1848768.html

相关文章: