preface

Hello, everyone, I am Lin Sanxin, with the most popular words, speak the most difficult knowledge point is my motto, the basis is advanced premise is my beginner’s mind, today to give you Lao once, talk about, how to use localStorage, sessionStorage, to more standard, higher, more can let a person at the moment a bright.

use

In the usual development, the use of localStorage, sessionStorage is very much, in our development plays a very important role:

  • 1. After the login is completetokenThe storage
  • 2. Storage of some user information, such asNickname, avatar, profile
  • 3. Storage of common parameters of some projects, for exampleSome ID, some parameter params
  • 4. Persistence of project state management, e.gVuex persistence, Redux persistence
  • 5. Storage of the overall project switching state, for exampleTheme color, icon style, language logo
  • 6, and so on 、、、、、、、、、、、、、、、、、、、、、、、、、、

Normal use

So, I believe that we are usually used in this way (take localStorage example)

1. Basic variables

// When we store base variables
localStorage.setItem('Fundamental variable'.'This is a fundamental variable.')
// When we value
localStorage.getItem('Fundamental variable')
// When we delete
localStorage.removeItem('Fundamental variable')
Copy the code

2. Reference variables

// when we store reference variables
localStorage.setItem('Reference variable'.JSON.stringify(data))
// When we value
const data = JSON.parse(localStorage.getItem('Reference variable'))
// When we delete
localStorage.removeItem('Reference variable')
Copy the code

3, empty

localStorage.clear()
Copy the code

What are the problems exposed?

1. Naming is too simple

  • 1. For example, we save user information and use ituserStore it as a key
  • 2. For storing themesthemeStore it as a key
  • 3. Used when storing tokenstokenStore it as a key

In fact, this is very problematic, we all know that the same two projects, their localStorage is interchangeable.

For example, I now have two projects under the same source https://www.sunshine.com. Both projects need to store a value with key name in localStorage. This will cause the name of the two projects to replace each other. The phenomenon of mutual contamination:

2. Timeliness

We all know localStorage, sessionStorage these two life cycle is respectively

  • LocalStorage: exists unless manually cleared
  • SessionStorage: Life ends when the current TAB closes or the browser closes

In fact, there is no problem with ordinary use, but for some specified cache with specific timeliness, is very important! Like one day:

  • Back end: “Bro, I’ll give you the token as soon as you log in.”
  • Front end: “Ok, then you should be able to determine whether the token expires or not? “
  • Back end: “No, put it in front of you to determine expiration.”
  • Front end: “Okay… “

In this case, because we need to determine the expiration in the front end, we need to set a time limit for the token, either 1 day, or 7 days

3. Secrecy

In fact, this is easy to understand, you think, when we want to cache things, stored in localStorage, sessionStorage, in the development process, is really conducive to our development, we want to see at a glance, click Application can see.

But once the product goes live, the user will be able to see what’s in the cache, and we’re going to be thinking, “Well, there’s something the user can see, but there’s something I don’t want you to see

Or when we do state management persistence, we need to store data in localStorage first, at this time it is necessary to encrypt the cache.

The solution

1. Naming conventions

My personal opinion is project name + current environment + project version + cache key, if you have other rules, please tell Lin Sanxin in the comment section, let Lin Sanxin learn

2, expire timing

When setting the cache key, wrap the value into an object, which has a corresponding aging period. When you want to obtain the cache value next time, determine whether there is a timeout. If there is no timeout, obtain the value, and delete the cache if there is a timeout

Crypto encryption

Encryption is very simple, directly use crypto-js to encrypt data, use the library encrypt, decrypYT to encrypt and decrypt

practice

In fact, practice is relatively simple, nothing more than four steps

  • 1. Consult with your teamkeyThe format of the
  • 2. Consult with your teamexpireThe length of the
  • Discuss with the team which library to use to encrypt the cache (personal recommendation)crypto-js)
  • 4, code implementation (not difficult, I will not write here)

conclusion

Some people may think it is not necessary, but it is very necessary to be strict with yourself. Only by being strict with yourself at ordinary times can we achieve a better downward compatibility difficulty in every company.

If you think this article is a little bit helpful to you, click a like and encourage Lin Sanxin haha. Or you can join my shoal of fish to enter the learning group, shoal of fish, please click here to shoal of fish, I will regularly broadcast mock interview, resume guidance, answer questions