cookie

  1. Function:
  • Cookies are plain text and have no executable code. Store data. When users visit a website (webpage), we can store data on visitors’ computers through cookies, or the data (usually encrypted) stored on users’ local terminals by some websites for identifying users and session tracking.
  1. Features:
  • Different browsers store cookies in different locations and cannot be used universally. Cookie storage is distinguished in the form of domain names. Cookies stored in different domains are independent. We can set the effective domain of the cookie (the subdomain of the domain where the cookie is currently set), that is to say, the cookies we can operate are the current domain and all the subdomains under the current domain. The number of cookies stored in a domain name is limited. Different browsers store different numbers of cookies, generally 20. There is also a limit on the size of each cookie. Different browsers store different cookie sizes, generally 4KB. Cookies can also be set to expire at the end of the session by default, and will be automatically destroyed when the time expires
  1. Cookie values can be set and read:
  • 1. Set the client
  • Document. cookie =' name = value '; document.cookie ='username=cfangxu; domain=baike.baidu.com'
    1. Server side Settings
  • Whether you request a resource file (such as HTML/JS/CSS/image) or send an Ajax request, the server returns a response. In response header, there is an item called set-cookie, which is specially used by the server to set cookies.
    1. Cookie, which contains all cookies on the current site (to avoid cross-domain scripting (XSS) attacks, this method can only fetch non-HTTPOnly cookies). It concatenates all cookies with a semicolon + space, for example username=chenfangxu; Job =coding Modifying cookies To modify a cookie, you only need to reassign the value, and the old value will be overwritten by the new value.
  1. Cookie attributes:
  • New Date().setDate(odate.getDate () + 5); 5 days more than the current time.

localStorage

  1. Features:
  • HTML5 new approach, but compatible with IE8 and above.
  • Life cycle: Persistent local storage that never expires unless it is actively deleted.
  • Stored information is shared within the same domain.
  • When you add, modify, or delete localStorage on this page, this page will not trigger the storage event, but other pages will trigger the storage event.
  1. Size:
  • Typically 5M (depending on the browser vendor). It can be opened locally in non-IE browsing. The Internet Explorer browser must be opened on the server.
  1. Settings:
  • LocalStorage is essentially a string read. If too much content is stored, memory space will be consumed and pages will change. LocalStorage is restricted by the same-origin policylocalStorage.setItem('username','cfangxu');
  1. Access to:
  • Localstorage.getitem ('username') can also get the key name localstorage.key (0)
  1. Delete:
  • Get the first key name removedlocalStorage.removeItem('username')
  • You can also wipe out all storage at oncelocalStorage.clear()

sessionStorage

  1. Features:
  • Similar to localStorage, it is also a localStorage, which is session localStorage. Used to store data in a session locally, which can only be accessed by pages in the same session and is destroyed when the session ends. Therefore, sessionStorage is not a persistent local storage, only session level storage. This means that as long as the browser window is not closed, the data will still exist even if the page is refreshed or another page is entered. After closing the window, sessionStorage will be destroyed, or open another page of the same origin in a new window, sessionStorage is also not.

Cookie, localStorage, sessionStorage

  1. The same:
  2. Store data locally (browser-side).
  3. Different:
  4. As long as localStorage uses the same protocol, host name, and port, it can read/modify the same localStorage data.
  5. SessionStorage is more stringent than localStorage. In addition to protocol, host name, port, sessionStorage also requires the same window (that is, the browser TAB).
  6. LocalStorage is permanent unless manually deleted. SessionStorage When the session ends (the current page is closed, automatic destruction) cookie data will be sent to the server in each HTTP request, but localStorage, sessionStorage will not.