This is the third day of my participation in Gwen Challenge

preface

Modern Web browsers provide a lot of ways to store data in the web client on the user’s computer. It keeps the data in your computer for a long time, and it’s used a lot of times in the actual development, for example, to preserve the user’s personalized configuration of the application. This article will be divided into localStorage, sessionStorage these two parts, a simple introduction and how we use it

localStorage

It is a new member in HTML5, localStorage, which is mainly used as localStorage. It solves the problem of cookie storage space (the maximum content of each cookie can not exceed 4K). It can be said that it is the evolution of cookie. LocalStorage also has a space limit. For example, the capacity of each domain name in Google chrome is 5M.

The life cycle

The life cycle of localStorage is permanent. Even if the browser is closed, the data will not be wiped, you need to actively destroy.

Sets the local store keys and values

Parse the data into A JSON object, and then use the json. stringify method to convert the JSON into a string and store it in localStorage

localStorage.setItem('myJujin'.'https://juejin.cn/user/2858385965322935');
Copy the code

Gets the value stored locally

const myJujin = localStorage.getItem('myJujin');
Copy the code

Deletes the local store for the specified key

localStorage.removeItem('myJujin');
Copy the code

Delete all local storage at this site

localStorage.clear();
Copy the code

In the browser, open application in the developer tools, find storage and expand it to see the local data stored on the current site

LocalStorage Browser compatibility

Some advantages of localStorage

  • To solve thecookieSize limit of
  • It can store data for a long time and will not be cleared
  • Data can be accessed under the same domain name

Some disadvantages of localStorage

  • Each browser pairlocalStorageThe limits are inconsistent
  • Internet Explorer 8 or later is requiredlocalStorageThis feature
  • The stored value can only bestringType, cannot store objects directly, array. Usually we convert the data toJSONPut the type in
  • If the amount of data is too large, the page will stall
  • localStorageCannot be read in browser privacy mode

sessionStorage

SessionStorage is similar to the localStorage feature mentioned above, is also used to store the user temporary information object, the difference is that localStorage is persistent storage data, that is, close the browser data will not be emptied, while sessionStorage is only session level storage, That is, if the seesionStorage of the current page stores data, and you close the TAB, the session data will be destroyed

The life cycle

The sessionStorage life cycle is only valid until the current browser TAB is closed, not persistent. The data is there until the TAB or browser is closed. Generally, the storage size is 5M.

Sets the keys and values stored for the session

Parse the data into a JSON object, and use the json. stringify method to convert the JSON into a string and store it in the sessionStorage

sessionStorage.setItem('myJujin', 'https://juejin.cn/user/2858385965322935');
Copy the code

Gets the value stored by the session

const myJujin = sessionStorage.getItem('myJujin');
Copy the code

Deletes the session store for the specified key

sessionStorage.removeItem('myJujin');
Copy the code

Delete all session storage for this site

sessionStorage.clear();
Copy the code

SessionStorage will not be cleared in the refresh page, but the new page in the same domain can not be accessed

Like localStorage, we can see the session data stored on the current page through the browser’s developer tools

SessionStorage compatibility

Some advantages of sessionStorage

  • To solve thecookieSize limit of
  • Under different WindowssessionStorageStorage is independent of each other

Some disadvantages of sessionStorage

  • Each browser pairsessionStorageThe limits are inconsistent
  • Internet Explorer 8 or later is requiredlocalStorageThis feature
  • The value stored can only be string, cannot store objects, arrays directly. Usually we convert the data to JSON and store it there
  • If the amount of data is too large, the page will stall
  • sessionStorageCannot be read in browser privacy mode

On safety

Do not store sensitive data in sessionStorage and localStorage, as they can easily be tampered with locally, and always be aware of the risk of XSS injection when using them!

conclusion

SessionStorage and localStroage are basically the same, while localStorage will always store data. If your application does not need to persist data, it only needs one-time data used by the current user, which can be discarded after using up this time. Then you can store it in sessionStorage, which is better