Web storage application cache

There are two storage methods in H5

1,window.sessionStorage session storage:

Save in memory.
The lifecycle is to close the browser window. That is, the data is destroyed when the window is closed.
Data can be shared in the same window.

2,window.localStorage local storage:

It may be saved in the browser memory or on the hard disk.
Permanently effective, unless manually deleted (e.g. when cleaning up garbage).
Multiple windows can be shared.

Common API

Set storage content:

	setItem(key, value);

Read stored content:

	getItem(key);

Delete the stored content according to the key:

	removeItem(key);

Empty all stored contents:

	clear();

Case: remember user name and password

<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>Document</title>
</head>
<body>
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <label for="">
    user name:<input type="text" class="userName" />
  </label>
  <br /><br />
  <label for="">
    password:<input type="text" class="pwd" />
  </label>
  <br /><br />
  <label for="">
    <input type="checkbox" class="check" id="" />Remember the password
  </label>
  <br /><br />
  <button>Sign in</button>

  <script>
    var userName = document.querySelector('.userName');
    var pwd = document.querySelector('.pwd');
    var chk = document.querySelector('.check');
    var btn = document.querySelector('button');

    //        When clicking login, if "remember password" is checked, the password will be stored; Otherwise, clear the password
    btn.onclick = function () {
      if (chk.checked) {
        //                Remember data
        window.localStorage.setItem('userName', userName.value);
        window.localStorage.setItem('pwd', pwd.value);
      } else {
        //                Clear data
        window.localStorage.removeItem('userName');
        window.localStorage.removeItem('pwd');
      }
    }
    //        When logging in next time, if there is data recorded, it will be filled in directly
    window.onload = function () {
      userName.value = window.localStorage.getItem('userName');
      pwd.value = window.localStorage.getItem('pwd');

    }
  </script>
</body>

</html>
</body>
</html>

Application cache

In HTML5, we can easily build an offline (no network state) application by creating a cache manifest file.

advantage

1. Configure the resources to be cached;

2. The application without network connection is still available;

3. Read cache resources locally to improve access speed and enhance user experience;

4. Reduce requests and ease the burden on the server.

cache manifest file

The cache manifest file lists the resources that the browser should cache for offline access. Recommended appcache is used as the suffix, and MIME type is also added.

How to write the contents in the cache list file:

(1) Write CACHE MANIFEST on the top line.

(2) CACHE: newline specifies the static resources we need to CACHE, such as css, image, js, etc.

(3) NETWORK: newline specifies the resources that need to be accessed online. Wildcards can be used (that is, resources that do not need to be cached and can only be accessed under the NETWORK).

(4) FALLBACK: line feed: an alternate resource when the cached file cannot be found (when a resource cannot be accessed, it will be automatically replaced by another resource).

CACHE MANIFEST
CACHE:
#Files to cache
./img/1.jpg
./img/2.jpg
./img/3.jpg
NETWORK:
#Specify files that must be networked to access
./js/1.js
./js/2.js
./js/3.js
FALLBACK:
./css/1.css ./css a.css

#The current page cannot be accessed. It is a fallback page
FALLBACK:
404.html

use

Add the attribute manifest = "demo.appcache" in the root element (html) of the page where the application needs to be cached. The path should be correct.

<html manifest="01.appcache">

Keywords: Javascript Front-end html Cache

Added by Jas on Sat, 05 Feb 2022 11:56:51 +0200

Programming VIP