Note: it only applies to communications under different pages of the same website. Because the data stored in localStorage can only be fetched from the same website.

web storage

SessionStorage and LocalStorage are browser LocalStorage, collectively called Web Storage, The localStorage mechanism is implemented through the window. sessionStorage and window. localStorage properties on the browser.

The API:

  1. xxxxxStorage.setItem(‘key’, ‘value’); The method takes a key name and value as arguments, adds the key-value pair to the store, and updates the corresponding value if the key name exists.

  2. var data = xxxxxStorage.getItem(‘person’); This method takes a key name as an argument and returns the value of the key name.

  3. xxxxxStorage.removeItem(‘key’); The method takes a key name as an argument and removes the key name from storage.

  4. Xxxxxstorage.clear () Calling this method clears the store of all key names

Note: The contents of SessionStorage will disappear after the browser window is closed. The content stored in LocalStorage must be manually cleared before it disappears.

Storage event (not heard before)

  1. Triggered when the Storage object changes (that is, storage.clear () is triggered only once when a data item is created/updated/deleted).

  2. Changes made within the same page do not take effect.

  3. Changes made to other pages under the same domain name will take effect. (Modified pages do not trigger events, but shared pages do)

    NewValue: the newly set value if clear() is called; oldValue: the value before the change is called; null url if clear() is called: Url of the document that triggers the script change storageArea: the current storage objectCopy the code

Usage:

window.addEventListener('storage'.function (event) {
    // Write the specific business logic here
})
Copy the code

Page communication example

In this example, data is stored in localStorage in 01.index.html and displayed in real time in input in 02.index.html. Make the data in its two input boxes identical in real time.

// 01.index.html
    <! DOCTYPEhtml>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
      <title>Provide data</title>
    </head>

    <body>
      <input type="text" id="input">
      <script>
        const input = document.getElementById("input");
        input.onchange = () = > {
          localStorage.setItem("data", input.value)
        }
      </script>
    </body>

    </html>
Copy the code
// 02.index.html
    <! DOCTYPEhtml>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
      <title>To get the data</title>
    </head>

    <body>
      <input type="text" id="input">
      <script>
        const input = document.getElementById("input");
        window.addEventListener("storage".(event) = > {
          input.value = event.newValue
        })
      </script>
    </body>

    </html>
Copy the code

The demo requires you to test on the same domain and port. So you need to install an HTTP-server package to help you start your project.

npm install -g http-server
Copy the code