Preface: Recently, I encountered A problem when I was working on A project. The project was embedded into A platform. Users of platform A may have multiple accounts of different roles under project B, and each account has A different token. Therefore, the solution adopted was to use local cache localStorage to store token information, but another problem occurred. When switching to different accounts on different pages of the same browser, the token value of account A on page B was obtained after operation, and the token value between different pages of the same browser was wrong. Therefore, the subsequent solution uses sessionStorage to ensure that the token values of different sessions are independent of each other.

Login of user 1 on platform A plat_token + ID of user 1’s account in project B -> Unique Item_token of user 1’s account in project B

cookie

Cookie Usage

Native use of JavaScript

Cookies are stored as name/value pairs. JavaScript can create, read, and delete cookies using the document.cookie property.

Document. cookie="itemToken=10001110"; Add an expiration time (in UTC or GMT) for cookies document.cookie="itemToken=10001110; expires=Thu, 22 Apr 2021 12:00:00 GMT"; Use the path parameter to tell the browser the path of the cookie. By default, cookies belong to the current page. document.cookie="itemToken=10001110; expires=Thu, 22 Apr 2021 12:00:00 GMT; path=/";Copy the code

Set the value of the cookie

const setCookie = (name,value,extime) =>{ let SetTime = new Date(); Settime.settime (settime.getTime ()+(extime*24*60*60*1000)); // Set let expires=" expires="+ settime.togmtString (); // Set expiration time document.cookie = name + "=" + value + "; " + expires; // Create a cookie}Copy the code

Gets the cookie value of the specified name

Const getCookie = (objName)=>{// Get the value of the specified cookie let arrstr = document.cookie.split(";" ); let res = null for(var i = 0; i < arrstr.length; i ++){ let temp = arrstr[i].split("="); if(temp[0] == objname) { res = unescape(temp[1]) } } return res }Copy the code

localStorage

localStorage.getItem(keyName); Localstorage. setItem(keyName,value); Localstorage.removeitem (keyName); // Delete the local store value of the specified KECopy the code

sessionStorage

sessionStorage.getItem(keyName); Sessionstorage. setItem(keyName,value); sessionStorage.setItem(keyName,value); / / the value stored in the key field in the sessionStorage. RemoveItem (keyName); // Delete the local store value of the specified KECopy the code

other

The similarities and differences of the three

features cookie localStorage sessionStorage
The lifetime of the data You can set the expiration time. By default, the expiration time is after the browser is closed It is stored permanently unless it is removed This parameter is valid only in the current session and is cleared after you close the page or browser
Data storage size About 4 k As a general rule, be 5 MB As a general rule, be 5 MB
Communicates with the server This is carried each time in HTTP headers, and using cookies to store too much data can cause performance problems It is saved only in the client (browser) and does not communicate with the server It is saved only in the client (browser) and does not communicate with the server
Ease of use Requires the programmer to encapsulate, the source Cookie interface is not friendly The source interface is acceptable and can be repackaged to provide better support for objects and arrays The source interface is acceptable and can be repackaged to provide better support for objects and arrays

Principles and advantages and disadvantages of caching

Principle: Check whether there is any data in the cache. If there is any data in the cache, return the data directly. If there is no data in the cache, the database will be queried, the data will be stored in the cache, and then back to the backend.

Advantages:

  1. This reduces the database read operations and reduces the database pressure
  2. Speed up the response

Disadvantages:

  1. Data stored in memory may be lost because of memory power outages that wipe out data
  2. The data in the cache may be inconsistent with the data in the database
  3. Memory costs are high
  4. The memory capacity is smaller than that of hard disks

Refer to the link

Segmentfault.com/a/119000000… Juejin. Cn/post / 684490… Segmentfault.com/a/119000001…