One, cool beginning

After a year of diving for gold, I finally found the courage to write my first article. Front end side dish, just want to record one’s own idea, hope you see this article big guy light spray.

In the current development mode of the front and back end separation, the storage of information generally do not use the cookie used in the past, take the pen owner I have done before the project. After successful login, the backend will return a token to me. Generally, I will save this token in localStorage, and carry this token in the request header in each subsequent request. As for why to save to localStorage, I believe that developers who have done a single page web application also know that if not saved, the user refresh is nothing.

We can see that front-end storage is becoming more and more important in the project, the browser provides us with two storage solutions, one is localStorage, one is sessionStorage. The information stored in localStorage is permanent, and will never disappear unless the user manually deletes it or there is no localstorage.removeItem (XXX) call in the code; The information stored in sessionStorage is one-time. The next time the user closes the page, the information will not be stored again. But in the application of the actual project, the performance of these two schemes is not so satisfactory. For example, I want to realize the function that the user does not need to log in again within seven days after login. After the token is generated, the backend sets the expiration time of the token to 7 days, ok, and then passes it to the front-end. However, according to the storage solution currently provided by the browser, I can only choose permanent storage and one-time storage. One-time storage is definitely not enough, and permanent storage is against my wishes.

Ii. Previous solutions in the project

In the previous project, I stored the token value in localStorage along with an expiration time (one millisecond), and then when the project was initialized, I would check the expiration time to see if it was less than the current time, and delete the token if it was. In this way, the token will be deleted from localStorage when the subsequent project uses the token. However, there is a problem with this. If the token expires 10 seconds before the project is opened, the token will not be deleted. So I had this garbage solution in my head, in for a penny, in for a pound, I encapsulated it as a tool.

Let me shamelessly introduce my project, Sweet-storage, regardless of the name. Github can be found at github.com/Chechengyi/… . By the way, I also ask for a wave of star.

Come up with new ideas

Cough cough cough! No more nonsense, talk about my implementation.

Storage.save (‘name’, ‘chechengyi’, 10000) this line of code means that I want to store information with key name and value chechengyi in localStorage. I want this information to be stored only for 10 seconds. I will store the expiration time information in localStorage at the same time

  {
      key: time
  }
Copy the code

Is also stored in localStorage. Key is the key, and time is the expiration time of the message. New Date().gettime ()+ the time that we set. This gives you an exact number of milliseconds. This expiration time information is stored in my project as the ISTORAGE_RECORD field. New Date().gettime ()-time = new Date().gettime ()-time Timer time to the localStorage stored information and stored time information is the key-time deleted in the object on the line.

But there is a problem here, and that is. Maybe we need to have an expiration date and store more than one time. I’m supposed to build three timers when I have three? I’ll make 100 timers for every 100 I save, okay? It’s too low and it’s not realistic. So I did a lot of thinking and realized that priority queues, which I had just learned about the other day, would work well here.

We can do this by making a minimum heap based on the time in the ISTORAGE_RECORD object (my priority queue is based on the minimum heap). The minimum heap is the root node, and the one with the smallest time is the one that executes first. When the timer is executed, the information and time information stored in the localStorage will be deleted, and then the priority queue is out of the column. The next element waiting for the queue to be out of the column is the latest next time, waiting for the expired information. I won’t talk much about the operation of the smallest heap data structure. If you are interested in it, you can go and see it. This is the general idea of my project implementation, the real implementation of the word to consider has not expired by the user deleted and so on.

Here I was thinking, no, so expired is only “quietly” expired. I want to know when it expires, that is, I want it to expire can you let me know? So after another round of soul-searching, I realized that the publis-subscribe model I learned last year could work here. Then there’s the code implementation, which is about being astute about them. If I subscribe to an event with the stored key name, in my project it’s storage.on(‘name’, (key)=>{}), then I’m observers.trriger(‘name’) to post the event when the timer is executed, And pass the key of the information to be deleted into the subscribed function. So that’s the notification function. I won’t go into detail here on how the publis-subscribe pattern is implemented.

Four, shameless summary

Sweet-storage implementation of the general idea is finished, interested students can go to see the source code implementation, in this emphasis github address: github.com/Chechengyi/… . My code is rubbish and easy to understand.

I also uploaded the project to NPM, NPM install sweet-storage can be installed to the local. I have been diving on various forums for more than a year, and every time I see others share their insights, I feel itchy. This time, I finally make up my mind to take the first step. In this process also learned a lot, I hope I can stick to it.

If there is something wrong, I hope my friends will point it out and give me more advice

Finally emphasize a wave!!

Github can be found at github.com/Chechengyi/… .

For the star, fuck…