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

cookie

features

  • When the server responds, it contains session information in the response header through set-cookie. After receiving the response, the client will store the returned Cookie information, and then send it to the back end together with Cookie in the request header in each subsequent request

  • By default, it is cleared after the browser is closed

  • You can set the expiration time

  • Document. cookie can only be added one by one, not multiple Settings at a time

  • There is a limit on the number of cookies that will replace the previous cookie

  • In same-origin HTTP requests

  • No more than 4K, and because every HTTP request carries a cookie

operation

  • cookieThere is only onedocument.cookieinterface

Add/Modify

document.cookie="name=tom" // Add a new cookie or change the name
Copy the code

To obtain

document.cookie // Get all cookies, delimited by semicolons if character string
Copy the code

delete

Deleting a cookie requires setting its expiration time to -1

SessionStorage

features

  • Temporary storage, close the current page to clear the data
  • Stored on the client
  • The storage size is 5M
  • Only string types can be stored

operation

Add/Modify

sessionStorage.setItem('name'.'tom') 
sessionStorage.name ='jerry'
Copy the code

To obtain

let name = sessionStorage.getItem('name')
let name = sessionStorage.name
Copy the code

delete

sessionStorage.removeItem("name");
delete sessionStorage.name;
Copy the code

! [image-20200820183604286](cookie session localstorage.assets/image-20200820183604286.png)

localStorage

features

  • Persistent storage
  • The storage capacity does not exceed 5m
  • Pages must be from the same domain and accessed using the same protocol on the same port

operation

Add/Modify

localStorage.setItem("name"."tom");
localStorage.name = "jerry";
Copy the code

To obtain

let name = localStorage.getItem("name");
let name = localStorage.name;
Copy the code

delete

sessionStorage.removeItem("name");
delete sessionStorage.name;
Copy the code

conclusion

The difference between

Cookie SessionStorage LocalStorage
Storage size 4k Generally for 5 m Generally for 5 m
Interact with the server It is automatically mounted on the request head and sent to the back end together (so don’t save too much information to make the request take too long) Don’t mount Don’t mount
Storage time You can set the expiration time, which is cleared when the browser closes by default Clear when closing the page or closing the browser Persistent storage,

security

  • Prohibit users from reading cookies: Cookies have an HTTP-only property. After setting this value, js scripts cannot read this value

  • Forbid users to modify Storage: There is a Storage event that is triggered when users add, delete, change, or query a Storage

    • Domain: domain for storing changes.
    • Key: the key to be set or deleted.
    • NewValue: indicates the newValue of the key, or null if the key is deleted.
    • OldValue: the value before the key changes.
    window.addEventListener('storage'.e= >{
    localStorage.setItem(e.key,e.oldValue)  // Get the old value and override the changed value manually
})
Copy the code