preface

H5 new sessionStorage and localStorage local cache scheme, combined with cookies and session, to thoroughly understand their similarities and differences and functions.

Cookie

How are cookies generated?

Cookies can be generated in two ways

    1. Through JavaScript
var cookie = 'value';
document.cookie = 'key' + '=' + cookie
Copy the code
    1. Set by the server in the response headerset-cookieattribute

When the server receives an HTTP request, it can add a set-cookie option to the response header. After receiving the response, the browser usually saves the Cookie and sends the Cookie information to the server through the Cookie request header in each subsequent request to the server.

The attribute of the Cookie

  • Expires: Expiration time. If this parameter is not set, it is cleared when the page or browser is closed by default.
  • Domain:Break down
  • Path:Break down
  • Secure = true: Sets the Secure Cookie to be transmitted only through HTTPS.
  • HttpOnly = true: Set HttpOnly cookies to be carried only by HTTP,Cannot be read by JavaScript. Can be used to preventXSS(Cross-site scripting attacks).
  • SameSite Cookie: This Cookie is not carried during cross-site requests. Can be used for defenseCSRF(Cross-site request Forgery), there are compatibility issues.

defects

  • Store limited information, oneCookieThe biggest store4KB, a domain name can be stored at most50 cookies.
  • It’s not particularly safe.
  • May be disabled by browser or user.

Session

Session is not a specific parameter value. Session is a mechanism for the browser to talk to the server. Since HTTP requests are stateless, the session mechanism is used to ensure that both requests come from the same party.

The session to create

  • The first client request, such as login.
  • Server storageThe login dataAnd generate the correspondingsessionId.
  • willsessionIdthroughset-cookieSend to the client.
  • The second time the client sends a request it automatically carries thissessionId
  • Server verificationsessionIdTo ensure that the message is sent from the same client.

Session invalidation Mechanism

As long as the Cookie storing the sessionId is invalid, the session is invalid and the authentication needs to be initiated again.

The characteristics of

  • Session data is stored on the server, onlysessionIdStored on the client.

sessionStorage localStorage

The same

  • The storage space5MB

different

  • Storage time
    • localStorage: Permanent storage until manual deletion.
    • sessionStorage: Only the current session exists. Closing the browser or closing the current TAB will delete it.
  • The domain
    • localStorage: Only the current domain name can be accessed. The sub-domain name cannot access the localStorage under the parent domain name. (When using cookies, the child domain can access the parent domain, but note the domain Settings. See the link above for details.)
    • sessionStorage: Only the current session exists. Closing the browser or closing the current TAB will delete it.