## Client-side storage

### Knowledge points

  • How cookies are used in KOA
  • How to use cookies on the client
  • LocalStorage and sessionStorage
  • The similarities and differences between various local stores

### Class objectives

  • Learn how to use cookies on the server and client
  • LocalStorage and sessionStorage will be used to persist data
  • Understand the similarities and differences between various local stores

Client storage scheme

  • Server-side storage

    • Server file storage
    • memory
    • Databases: mysql, MongooDB, Oracle, etc.

  • Client storage (offline storage)

    • The browser

###cookie

  • Cookies are a way for the server or script to maintain client information over HTTP.

  • Use of cookies in KOA

    • Store the value of the cookie;
    ctx.cookies.set(name, value, [options])
Copy the code
    • Gets the value of the cookie
    ctx.cookies.get(name, [options])
Copy the code
    • Options Common Settings
      • maxAgeA number represents the number of milliseconds from date.now ()
      • expiresCookies are out of dateDate
      • pathCookie path, default is'/'
      • domainThe cookie domain name
      • secureSecure cookies can only be transmitted over HTTPS after being set
      • httpOnlyThe server has access to cookies. The default istrue
      • overwriteA Boolean value indicating whether to override previously set cookies of the same name (the default isfalse). If true, set all cookies with the same name in the same request

Login case

  • Verify that the user name and password are correct.

  • To achieve the login function, by remembering me to achieve seven days free login;

### Record skin function via local cookie

  • Client cookie usage;

    • Set up the

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

      • Key and value are contained in a string

        • Key contains the field
          • [name] this name is the name of the cookie it selects for itself, and the value of the same name will overwrite it
          • Domain Domain name
          • Path Owning path
          • Expires/ max-age Expires/ duration (in seconds)
          • Http-only Specifies whether to use HTTP only. If true, the client can transmit HTTP requests and responses, but the client browser cannot use JS to read or modify them

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

    • To obtain

      document.cookie
Copy the code

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

    • encapsulation

      • Setting cookie Encapsulation
      / / set the cookie
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
      • To get a cookie
      / / get a Cookie
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

    • Several skin background colors

      ["white"."RGB (204232207)"."RGB (200200169)"."RGB (114111128)"]
Copy the code

### Client operation cookie feature

  • The browser actively stores the value of the received set-cookie header
  • Timeliness;
  • You can set the http-only attribute to true to prevent client code (JS) from changing this value

Local Cache Storage

  • LocalStorage and sessionStorage

    • Set up the

      SetItem (Key, value) Adds or updates (if the key already exists) the value of the specified key in the data entry

    • To obtain

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

    • Removes the specified data

      RemoveItem (key) Removes the value of the specified key from the data item

    • Clear all data

      Clear () Clears all data items

Change skin function through storage

Add song list function via storage

  • To deal with the problem of opening more local music pages through Stroage;
  • Delete and delete all lists;

### Local storage similarities and differences

  • In common

  • LocalStorage and sessionStorage have something in common with cookies

    • Same-domain (Same-origin policy) Restriction: Same-origin policy: The request and response are the same if the protocol, domain name, and port are the same. Otherwise, the request and response are cross-source or cross-domain
    • The stored content is converted to a string format
    • All have storage size limits

  • LocalStorage and sessionStorage have something in common

    • The API is the same
    • The storage size limit is basically similar
    • Unlimited number

  • The difference between

  • localStorage

    • There is no expiry date, it will always exist unless deleted
    • Page sharing in the same domain
    • Support storage events

  • sessionStorage

    • The browser is closed and automatically destroyed
    • Page private
    • Storage events are not supported

  • cookie

    • The browser will also proactively organize all domain cookies into request header cookies and send them to the server at each request
    • The browser actively stores the value of the received set-cookie header
    • You can set the http-only attribute to true to prevent client code (JS) from changing this value
    • Validity period can be set (auto destroy when browser is off by default)(varies by browser)
    • The number of users in the same domain is limited, preferably not more than 50 (varies by browser)
    • There is a limit to the size of a single cookie, preferably not more than 4000 bytes (it varies by browser)