Web storage includes cookie storage and webStorage

Cookies are stored

A Cookie is a piece of data, typically about 4KB, stored in a text file on your computer. When the Web server sends a Web page to the browser, the server does not record the user’s information after the connection is closed. Generally, it is generated by the server. You can set the expiration time. If cookies are generated on the browser side, they are invalid after the browser is closed by default

// Set the cookie setting properties: valid days, path(optional)
Cookies.set('name'.'terry', {expires: 7});
/ / get a cookie
console.log(Cookies.get('name'));
/ / remove the cookie
Cookies.remove('name');
Copy the code

WebStorage storage

The corresponding API types fall into two categories:

  • SessionStorage (Save session data)
  • LocalStorage (long-term storage of data on the client)
1. sessionStorage

The time to save the data is very short, because the data is essentially stored in the Session object. When opening the browser, users can view objects that need to be saved temporarily during operation. Once closing the browser, all data saved using the sessionStorage object will be lost.

sessionStorage.getItem(key,value);

The format is (key name, key value). Once a key name is set successfully, it cannot be changed or repeated. If the value is repeated, the original key name value will be overwritten.

Get data: sessionStorage.getitem (key); Return value A key corresponding to the specified key name, or Null if none exists. Note: when reopening the web page, the contents of the original sessionStorage object will be lost, so when the user clicks “Read” directly, the key value of the specified key name cannot be read.

// Set the content
sessionStorage.setItem('name'.'larry');
// Get the content
console.log( sessionStorage.getItem('name'));
// Clear the content
sessionStorage.clear('name');  // Clear property values
// Clear the content
sessionStorage.removeItem('name');  // Clear all of them
Copy the code
2.localStorage

Data can be stored on the client for a long time until manual erasure.

localStorage.setItem(key,value);

Obtain data: localstorage.getitem (key);

Localstorage.removeitem (key); Once successful, all data corresponding to the key name is deleted.

Clear property localstorage. clear(‘key’);

Note: Although the localStorage object can be used to store data on the client for a long time, when reading data across browsers, the saved data is not public, that is, each browser can only read the data stored in its own browser, not the data stored in other browsers.

// Local storage is stored on the local disk
// Set the content
localStorage.setItem('name'.'hhh');
// Get content
console.log(localStorage.getItem('name'));
// Clear the content
localStorage.clear('name');  // Clear property values
localStorage.removeItem('name');
Copy the code

Cookie stores a small amount of data, server oriented, cookies of the same server are shared, maximum 4KB WebStorage (only stored in the client (browser), does not participate in the communication with the server) sessionStorage sessionStorage, TAB TAB closed, session invalid – write items are recommended to use localStorage localStorage, save to a local disk, even if the browser is closed data.