这个需求的背景
在首页生命周期created里设置弹框组件 当首页刷新时,或者从别的地方跳到首页时会直接触发弹框。但是点击同意覆盖之后弹框就不会在显示,以后在刷新也不在显示弹框。如果点击暂不覆盖或者关掉弹窗只要触发首页或者从别的页面回到首页弹框都会出现。
1. 解决办法:
因为是在created里面写的方法,只要刷新方法就会执行。我们需要给这个方法加一个判断,在同意覆盖之后添加一个标识flag,在data里写这个数据默认是true,判断这个标识true的话判定成功,直接执行弹框组件方法。在这个组件的回调里写当触发同意覆盖后标识从true变成false(缓存实现),这时候判断条件不成功,所以不会进入到组件,不会显示弹框。
2. 为什么要用缓存 因为这个方法是在生命周期的created里执行的,只要一刷新就会初始化里面的方法,所以我们在组件里面写标识的话会判断一直是true,每次刷新弹框还会出现,把组件放在判断里,判断条件是一个默认为true的标识flag 缓存这个数据我们用localstorage这个api,locastorage的生命周期是永久性的,就算关闭浏览器也会显示,只有清除浏览器缓存才可以清除这个字段。我们在这个弹窗的回调里种上缓存让flag=false只要触发确定按钮的回调,浏览器里就会缓存一个键值对让flag=false。flag等于false最开始的判断就不成立就不会走到弹框组件里。当刷新的时候缓存的键值对也不会取消,点击弹框组件的确定按钮它回调里缓存的键值对一直生效flag一直是false,也就是点击同意覆盖后再也不会出弹框了
3缓存使用方法
在这里要多说一下这个方法是H5新增特性 所以如果使用的是ie浏览器的话可以用userData存储
下面代码是存储跟获取的用法
存是setItem 取是getItem
为什么要用类型转换: 使用localstorage.setItem('key','value')存储JSON对象时会发现浏览器存储的内容为[object,object],并不是原有的数据结构,这是因为我们在存储数据时没有进行类型转换,使用localStorage.setItem('key',JSON.stringify('value'))就能保证存储的数据结构正确,同理,获取数据时同样需要对数据进行格式转化,JSON.parse(localStorage.getItem('key'))
删除缓存的方法
// 删除对应键值的数据 **localStorage.removeItem('key') **
// 删除所有localStorage的数据** localStorage.clear()**