Web front-end performance optimization_Browser local storage

Browser storage

Cookie, SessionStorage, and LocalStorage can all be used to store data on the browser side, and they are all key-value pairs of string type!

  • Note: Session and SessionStorage are not a concept! ! ! There is a storage method on the server side called: session storage, often referred to as session

session: session
  SessionStorage: the container used to store data on the browser side, often referred to as session by front-end personnel.
  Session session storage: a way of storing data on the server side, often referred to as session by back-end personnel

Web Storage

  • Both SessionStorage and LocalStorage are browser local storage, collectively called Web Storage, and the storage content size generally supports 5-10MB
  • The browser side implements the local storage mechanism through Window.sessionStorage and Window.localStorage properties.

Related APIs:
1. xxxxxStorage.setItem('key', 'value');
  This method accepts a key name and value as parameters, and will add the key-value pair to the storage. If the key name exists, update its corresponding value.
2. var data = xxxxxStorage.getItem('person');
  This method accepts a key name as a parameter and returns the value corresponding to the key name.
3. xxxxxStorage.removeItem('key');
  The method accepts a key name as a parameter, and deletes the key name from the storage.
4. xxxxxStorage.clear();
  Calling this method will clear all the keys in the storage

Remarks :
  The content stored in SessionStorage will disappear as the browser window is closed.
  The content stored in LocalStorage needs to be manually cleared to disappear.

Storage events:
1. Triggered when the Storage object changes (that is, when creating/update/deleting data items, Storage.clear() will only be triggered once)
2. Changes in the same page will not work
3. In the same Changes to other pages under the domain name will take effect. (The modified page will not trigger the event, and the page shared with it will trigger the event)
  key: The modified or deleted key value, if clear() is called, is null
  newValue: the newly set value, if clear() is
  oldValuecalled , it is null : called The value before the change, if clear() is called, it is null
  url: the url of the document that triggered the script change
  storageArea: the current storage object
usage method:
window.addEventListener('storage',function (event) { //此处写具体业务逻辑 })

Test storage capacity of browser support

Guess you like

Origin blog.csdn.net/qq_43562262/article/details/109002840