Web Storage has two Storage modes:

SessionStorage and localStorage. SessionStorage is used to store data in a session locally. The data can only be accessed in the same session page, and the data will be destroyed after the session ends. Therefore, the main difference between sessionStorage and localStorage lies in the life cycle of data storage. The life cycle of data stored in sessionStorage is a session, while the life cycle of data stored in laocalStorage is permanent until it is actively deleted, otherwise the data will never expire.

Web Storage and cookie similarities and differences and advantages and disadvantages

Similarities: (1) They can both be used to store user data.

(2) They store data as strings

(3) The data they store is limited in size

Differences :(1) their life cycles are different. The life cycle of sessionStorage is a session, the life cycle of localStorage is permanent, the life cycle of cookie can be customized, cookie can set expiration time, data can be accessed before the expiration time.

(2) Different data size limits. Most modern browsers limit the Storage size of storages to less than 5M, and the size of cookies to 4K

(3) Different browsers support different API call methods. LocalStorage and sessionStorage have a unified API interface, which provides great convenience for their operations. The following uses localStorage as an example to introduce how to use the API interface, and these interfaces also apply to sessionStorage.

  • Add a key/value pair: localstorage.setitem (key, value)setItemUsed to store the value value on the key, except for usingsetItem, can also be usedlocalStorage.key = valueorlocalStorage['key'] = valueThese two forms. Note also that the key and value values must be strings; if they are not, their corresponding values will be calledtoString()Method to convert to a string and store it. When we want to store objects, we should first convert them to a string format we can recognize (such as JSON format) before storing them.
Localstorage.setitem ('name', 'lilei'); localstorage.setitem ('name', 'lilei'); // localStorage.name = 'lilei'; // localStorage['name'] = 'lilei'; Localstorage.setitem ('user', json.stringify (id:1, name:'lilei'));Copy the code
  • Get key: localstorage.getitem (key)getItemUsed to obtain the data corresponding to the key, andsetItemThe same,getItemThere are also two equivalent formsvalue = localStorage.keyandvalue = localStorage['key']. The value obtained is a string. If other types are required, manual conversion is required.
Var name = localstorage.getitem ('name'); // var name = localStorage.name; // var name = localStorage['name']; Parse (localstorage.getitem ('user')); var user = json.parse (localstorage.getitem ('user'));Copy the code
  • Delete key-value pairs: localstorage.removeItem (key)removeItemThe item used to delete the specified key, localStorage does not have the concept of data expiration, all data if invalid, the developer needs to manually delete.
var name = localStorage.getItem('name'); // 'lilei' // delete localstorage.removeItem ('name'); name = localStorage.getItem('name'); // nullCopy the code
  • Clear all key-value pairs: localstorage.clear ()clearUsed to delete all stored content, it andremoveItemThe difference isremoveItemClear deletes all items.
// Clear localStorage localstorage.clear (); var len = localStorage.length; / / 0Copy the code
  • Localstorage.key (index)keyThe getKey () method gets the key name of the specified index. It should be noted that the index value corresponding to the early key is large, and the index value corresponding to the finished key is small.keyMethod can be used to traverse key values stored in localStorage.
    localStorage.setItem('name','lilei');
    var key = localStorage.key(0); // 'name'
    localStorage.setItem('age', 10);
    key = localStorage.key(0); // 'age'
    key = localStorage.key(1); // 'name'
Copy the code
  • Get the number of key-value pairs stored in localStorage: localstorage.lengthlengthProperty to get the number of key-value pairs in localStorage.
localStorage.setItem('name','lilei'); var len = localStorage.len; // 1 localStorage.setItem('age', 10); len = localStorage.len; / / 2Copy the code

Training: Check whether the account is admin during login and add functions selectively

Step1: The user type is obtained during login.

You will see on the server that the stored “account” value is not “admin”.

Step2: Use. First define the page you are using now.

Then use the