Client storage solution

This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Cookie usage on the client

Cookie is an HTTP protocol, the server or script can maintain client information a way.

Set up the

    document.cookie = 'key=value'
Copy the code

• Key and value are contained in a string
  • Key contains fields
    • [name] Indicates the name of the cookie. The value with the same name is overwritten
    • Domain Domain name
    • Path Owning path
    • Expires/ max-age Specifies the expiration time/duration, in seconds.
    • Http-only Specifies whether to use HTTP only. If true, the client can transmit in HTTP requests and responses.

    But when the client browser cannot use JS to read or modify

  • Use multiple key=value; (semicolon) to separate

To obtain

 document.cookie
Copy the code

The return value is a string of all cookies in the current domain name organized in a format: key=value; key1=value1; . keyn=valuen

encapsulation

• Setting cookie Encapsulation

function setCookie(name,value,options={}){ let cookieData = `${name}=${value}; `; for(let key in options){ let str = `${key}=${options[key]}; `; cookieData += str; } document.cookie = cookieData; }Copy the code

• Obtaining Cookie encapsulation

function getCookie(name){ let arr = document.cookie.split("; "); for(let i=0; i<arr.length; i++){ let items = arr[i].split("="); if(items[0]==name){ return items[1]; } } return ""; }Copy the code

Features of cookies operated by clients

• The browser actively stores the value of the set-cookie header it receives
• Timeliness;
• You can disable the client code (JS) from modifying this value by setting the http-only property to true

Local cache Storage

LocalStorage and sessionStorage

• Set up the

SetItem (key, value) Adds or updates the value of the specified key in the data item if the key already exists in the data itemCopy the code

• To obtain

GetItem (key) Obtains the value corresponding to the specified key in the data itemCopy the code

• Moves the specified data

RemoveItem (Key) Deletes the value of the specified key in the data itemCopy the code

• Clear all data

Clear () Clears all data itemsCopy the code

Local storage similarities and differences

In common

• LocalStorage and sessionStorage have the same characteristics as cookies
  • Same-domain (Same-origin policy) Restriction: Same-origin policy: If the protocol, domain name, and port of the request and response are the same, the request and response are same-origin. Otherwise, the request and response are cross-source or cross-domain
  • The stored content is converted to a string format
  • Both have storage size limits
• LocalStorage and sessionStorage have something in common
  • The API is the same
  • Storage size limits are similar
  • Unlimited number limit

The difference between

• localStorage

  • There is no validity period and it will exist until deleted
  • Pages in the same domain are shared
  • Storage Events

• sessionStorage

  • The browser closes and self-destructs
  • Page private
  • Storage events are not supported

• cookie

  • The browser also organizes the cookies under all domains to the request header cookie and sends them to the server
  • The browser actively stores the value of the set-cookie header it receives
  • You can disable the client code (JS) from modifying this value by setting the http-only property to true
  • You can set the validity period (default browser turns off autodestruct)(varies by browser)
  • There is a limit to the number of users in the same domain, preferably no more than 50 (depending on browser)
  • Individual cookie content size is limited, preferably no more than 4000 bytes (depending on browser)