In a creation login interface project, in the click login event, is the need to jump to the page, and the data (user name & password) to the second page for rendering, that is, today to talk about the method of localStorage.

Origin story

                           

— — — — — — — — — — — — — — — —

Jump to login page rendering

Implementation approach

  1. The first method: have the back end generate an interface to request data after a page jump. (In theory, this is possible, but if the back end has a temper and doesn’t write to you, you’ll just have to give it a hard time. Take a look at the second method.)
  2. The front-end also has front-end technology, using the new H5 feature localStorage for local caching, the second page to receive data and render.

Implementation method

In the blog, I write two simple demo for everyone to refer to, learn!

1. Login interface

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <input type="text" Placeholder =" input password "; placeholder=" input password "; placeholder=" input password" Href = "b.h HTML" @ click = 'send' > click the jump page and pass values < / a > < / p > < p > = = = {{MSG. Login}} {{MSG. Pass}} < / p > < / div > < / body > < script > var = new vm Vue({ el:'#box', data:{ msg:{ login:'', pass:'' } }, methods:{ send(){ if (! LocalStorage) {alert(' browser supports localStorage')}else{// Convert data to JSON var datas = json.stringify (this.msg); / / the browser to store data window. The localStorage. SetItem (" data ", datas); } } } }) </script> </html>Copy the code

2. Jump to the page

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> Jump page </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <p >{{jsonobj.login}}</p> <p >{{jsonobj.pass}}</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#box', data(){ return{ login:'', pass:'' } }, methods:{ }, created(){ if (! LocalStorage) {alert(" Browser supports localStorage "); } else {/ var/receiving data json = window. The localStorage. The getItem (" data "); Parse (JSON); var jsonObj= json.parse (JSON); // Assign this.jsonobj = jsonobj}}}) </script> </ HTML >Copy the code

3. The running results are as follows

The window localStorage attributes

Advantage:

  1. Compared with the upgraded version of cookie, it solves the problem of insufficient cookie storage space (the storage space of each cookie is 4K). LocalStorage can support the transmission of 5M, store the data locally, and then receive the cache on other pages for data request and rendering.

  2. The value type of localStorage is string, which requires some conversion to the common JSON object type. Parse () convert data to object -> json.parse () convert object to string-> json.stringify)

  3. LocalStorage is used to store the data of the entire website for a long time. The saved data does not expire until it is manually deleted.

  4. The localStorage property is read-only.

The only difference between localStorage and sessionStorage

LocalStorage is a persistent storage, while sessionStorage is a session where the key/value pairs are cleared at the end of the session.

Conclusion: Welcome to exchange and comment.