This is the 7th day of my participation in Gwen Challenge

The premise

As we all know, HTTP protocol is stateless protocol, so it is necessary to do user information storage in the front end, if the user information is not saved on the page, then a refresh will not be, the user has to log in again, that experience is very poor (user complaints). Front-end use of more storage is mainly cookie, localStorage, sessionStorage, the following talk about their similarities and differences, we can read after deciding which way to use storage.

cookie

Literally translates to “cookie”, which is the data set by the server through setCookie and stored in the front end. Cookies are carried in the request header in subsequent HTTP requests and sent to the server.

It has the following characteristics:

  • You can set the expiration time of cookies to remain valid until the expiration time, even if the window or browser is closed
  • The data size is about 4K
  • The number is limited (depending on the browser). Generally, the number cannot exceed 20
  • This is carried each time in the header of the HTTP request

usage

Set up the


// username is the name of the cookie
// answer cp3 is the value of the cookie
// expires Expires
// path Specifies the path Settings under the domain name
The default value is the current domain name, excluding the subdomain name. If the value is set, the subdomain name will be included. If the value is different from the current domain name, the setting fails
document.cookie="The username = answer cp3. expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/abc; domain=abc.com";
Copy the code

To obtain

  / / get a cookie
  function getCookie (name) {
    let arr
    const reg = new RegExp('(^| )' + name + '= (/ ^; (*). | $) ')
    if ((arr = document.cookie.match(reg))) {
      return decodeURIComponent(arr[2])  // Better use decodeURIComponent
    } else {
      return null
    }
  }
  getCookie('username') / / the answer cp3
Copy the code

Because HTTP headers are carried each time, too much HTTP storage can cause performance problems. As a result, html5 added the following two localStorage methods localStorage and sessionStorage

localStorage

Local storage, which has the following features:

  • There is no expiration time. If it is not manually deleted, it is permanently stored in the browser
  • As long asIP/port/protocolIf they are the same (that is, homologous), they can be sharedlocalStorageEven if it’s a different TAB
  • Different browsers cannot share
  • The maximum storage capacity is 5M
  • Key-value pairs, stored as strings

usage

/ / set
localStorage.setItem("name"."The answer cp3")
/ / to get
localStorage.getItem("name") / / the answer cp3
/ / delete the name
localStorage.removeItem("name") 
// Delete all
localStorage.clear()
Copy the code

sessionStorage

Session storage, which has the following features:

  • Close the browser or the TAB TABsessionStorageThat is cleared
  • Different TAB pagesessionStorageCannot be shared unless the iframe under the same TAB is the same
  • The maximum storage capacity is 5M
  • Key-value pairs, stored as strings

usage

/ / set
sessionStorage.setItem("name"."The answer cp3")
/ / to get
sessionStorage.getItem("name") / / the answer cp3
/ / delete the name
sessionStorage.removeItem("name")
// Delete all
sessionStorage.clear()
Copy the code

compatibility

Cookies: basically compatible localStorage/sessionStorage: mainstream browser, Internet explorer 8 and above are compatible

security

Front-end storage is not secure. As analyzed in previous articles, both XSS and CSRF attacks can leak data, so it is generally not necessary to store important information such as passwords.

conclusion

The above is my summary of cookie, localStorage, sessionStorage similarities and differences and usage, we understand, and then choose their own storage, technology has no advantages and disadvantages, suitable for their own is the best.