H5开发Vue中localStorage的取值问题

1,463 阅读1分钟

H5开发Vue中localStorage的取值问题

这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

在日常的业务中,我们需要根据需求来写一些H5页面,用于内嵌于APP中,因为H5页面相对于原生APP开发更为简单,在APP中使用一个webView内嵌我们的网页即可,帮助APP完善功能,比如一些游戏软件里面的活动页面,大多都是H5写的。

有网页就会有数据的交互,我们就需要客户端开发技术人员把我们需要的参数放在localStorage里面,或者使用URL传参。

localStorage

我们都知道,localStorage是浏览器用于存储我们的一些信息,包括登录网站生成的唯一ID或者其它用于鉴定自己身份的信息,存贮了这些个人信息,就能一次登录,畅通无阻,因为每次切换网页的时候网站都会进行身份的验证。

一般在H5的开发中,都是传userID、userKey这些参数,或者变更全面屏和非全面屏的padding值。那么如果使用Vue开发H5,在什么时候去取localStorage里面的参数呢?我们知道Vue是有生命周期的,一般的初始化数据是在created中

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。

但其实如果放在created中是获取不到的,我在开发的时候把各个生命周期都试了,发现并不好用,都是在页面第一次进入的时候获取不到,第二次进去就好了。这其实是因为客户端的技术同学是在网页完全加载完毕的时候才把参数放进去,这时候Vue的生命周期都走完了,当然获取不到。

想要获取肯定有办法,只是不能在生命周期中简单粗暴的获取,要自己多写一点,我们拿userID来举例

自锁

let that = this
let T = setInterval(()=>{
    if(!that.userID){
        that.userID = localStorage.userID
    }else{
        clearInterval(T)
    }
},10)

自锁就是放在mounted生命周期内的一个轮询,我们在data中定义userID这个变量,默认值为空,当userID没值的时候就一直轮询localStorage中的userID,当localStorageuserID有值的时候就会赋给data中的userID,然后销毁这个轮询定时器。这样,只要localStorage中放进去了我们想要的值,就会赋给对应的参数。

但是因为localStorage里面的参数会保留很久,所以下一个不同的用户进来的时候需要变更参数,需要在定时器前面先把userID清空

localStorage.setItem('userID','')

监听storage

还有一种办法是监听localStorage的变化,Vue本身是不能监听的,我们需要使用window的全局方法

windows.addEventListen('storage',function(e){
    console.log(e.value,e.key)
})

这个e里面包含了很多参数,有变更的参数的key、value和其它值,我们可以在每次localStorage的值变化时,与我们想要的参数进行匹配,来进行响应的操作。

URL传参

URL传参就是客户端的小伙伴把我们需要的参数放在URL中,然后我们在created生命周期中使用正则方法把想要的参数剥离出来。URL传参最简单,一般在浏览器中不会使用,因为安全性低,但是APP的内嵌H5用户是拿不到URL的,所以最推荐URL传参(笑,讲了这么多还是推荐URL)

放一个正则方法,增加小伙伴们的武器库

getUrlKey(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/+/g, "%20")
        ) || null
      );
    },
    //还以userID为例
    let userID = getUrlKey('userID')
    //即可