H5 The value of localStorage in Vue development is incorrect

This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

In daily business, we need to write some H5 pages according to requirements for embedding in the APP, because H5 pages are simpler than native APP development. We can use a webView to embed our web pages in the APP to help the APP improve its functions. For example, most of the active pages in some game software are written by H5.

There will be a web page data interaction, we need the client development technicians to put the parameters we need in localStorage, or use the URL to pass parameters.

localStorage

As we all know, localStorage is the browser used to store some of our information, including the unique ID generated by the login site or other information used to identify their own identity, stored these personal information, you can log in, unimpeded, because each time the web site will be switched identity verification.

Generally, in the development of H5, userID and userKey parameters are passed, or the padding value of full screen and non-full screen is changed. So if you use Vue to develop H5, when to fetch the parameters in localStorage? We know that a Vue has a life cycle, and typically the initialization data is in Created

Called immediately after the instance is created. In this step, the instance completes the configuration of data Observer, property and method operations, and watch/ Event event callbacks. However, the mount phase has not yet started and $EL Property is not currently available.

However, in fact, it is not available in created. I tried each life cycle during development and found that it does not work well. It is always not available when the page is entered for the first time. This is actually because the technical students on the client side put the parameters in when the web page is completely loaded, at this time the Vue life cycle has gone, of course, can not get.

There’s definitely a way to get it, but you can’t just get it in the life cycle, you have to write a little bit more yourself, so let’s take userID for example

Since the lock

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

SQL > select * from localStorage where userID = 0; SQL > select * from data where userID = 0; SQL > select * from data where userID = 0; When the localStorage userID has a value, it is assigned to the userID in data, and the poll timer is destroyed. This way, as soon as the desired value is placed in localStorage, it will be assigned to the corresponding parameter.

However, because the parameters in localStorage will be retained for a long time, the parameter needs to be changed when the next different user comes in. The userID needs to be cleared before the timer

localStorage.setItem('userID'.' ')
Copy the code

Listening to the storage

Another way is to listen for changes to localStorage. Vue itself cannot listen, so we need to use the global method of Window

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

This E contains a lot of parameters, including the key, value and other values of the changed parameters. We can match the parameters we want every time the value of localStorage changes, so as to respond to the operation.

URL and the cords

URL parameter passing is the client’s junior partner putting the parameters we want in the URL, and then we use the re method in the Created life cycle to strip out the parameters we want. URL parameter transmission is the simplest, which is generally not used in the browser because of low security. However, the EMBEDDED H5 users of APP cannot get the URL, so URL parameter transmission is the most recommended.

Add a regular method to your Arsenal

getUrlKey(name) {
      return (
        decodeURIComponent((new RegExp("[? | &]" + name + "=" + "([^ &;] +? (& # | |; | $)").exec(
            location.href
          ) || [, ""[])1].replace(/+/g."% 20") | |null
      );
    },
    // Take userID as an example
    let userID = getUrlKey('userID')
    / / can
Copy the code