标签：value json chrome 开发 调试 local remove als 事件
最近在用vue写h5项目，当使用window.location重定向页面或者刷新当前页面时， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。
后来在网上查找大神的解决方案如下：
export default { name: ‘App‘, created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) } }
拿到大神的解决方案后，马上在Chrome上调式，页面刷新后vuex实例数据确实不会消失，当时很庆幸解决了此问题，但是第二天，我用手机调试功能时，发现vuex管理的数据还是丢失了。才发现beforeunload在移动端存在兼容性问题（beforeunload对于移动端浏览器而言(Safari, Opera Mobile等)而言不支持beforeunload事件）。
没办法，因为项目赶，只能老老实实把丢失的数据用localStorage存储本地，然后利用页面的事件把数据存起来，再使用vue的生命周期删除存储的数据，该方法确实不怎么理想，但总算解决了数据丢失问题。
（localStorage用法如下）：
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();?//清空localStorage中所有信息
对于使用vue开发PC端，刷新网页后vuex的state数据丢失问题使用大神的解决方案可以解决此问题，但是移动端网页还是绕其他方法吧
vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性
标签：value json chrome 开发 调试 local remove als 事件
原文地址：https://www.cnblogs.com/lwming/p/10926562.html
