One, the use of sessionStorage
1.存储数据到本地，存储的容量5mb左右
2.这个数据的本质是存储在当前页面的内存中
3.它的生命周期为关闭当前页面，关闭页面数据会自动清除
api:
- setItem(key, value): Store data, store it in key-value pairs
- getItem(key): Get data, get the corresponding value through the key of the specified name
- removeItme(key): delete data, delete the corresponding value value through the key with the specified name
- clear(): Clear all stored content
window.sessionStorage.setItem('id', 1)
window.sessionStorage.getItem('id')
window.sessionStorage.removeItem('id')
window.sessionStorage.clear()
Second, the use of localStorage
1.存储的容量20mb左右
2.在不同浏览器不能共享数据，但是在同一个浏览器的不同窗口可以共享数据
3.永久生效。它的数据存储在硬盘上，并不会随着页面或者浏览器的关闭而清除
api:
- setItem(key, value): Store data, store it in key-value pairs
- getItem(key): Get data, get the corresponding value through the key of the specified name
- removeItme(key): delete data, delete the corresponding value value through the key with the specified name
- clear(): Clear all stored content
window.localStorage.setItem('id', 1)
window.localStorage.getItem('id')
window.localStorage.removeItem('id')
window.localStorage.clear()
Three, application cache
1. Concept
Use HTML5 to easily create an offline version of a web application by creating a cache manifest file
2. Advantages:
- Configurable resources to be cached
- Applications are still available without network connection
- Read cache resources locally, improve access speed and enhance user experience
- Reduce requests and cache server burden
3. Cache Manifest basis:
- To enable application caching, include the manifest attribute in the document tag:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
- Every page with a specified manifest will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is directly specified in the manifest file).
- The recommended file extension for the manifest file is: ".appcache".
- Note that the manifest file needs to be configured with the correct MIME-type, namely "text/cache-manifest". Must be configured on the web server
4. Manifest file:
- Concept: The manifest file is a simple text file that tells the browser what is cached (and what is not cached)
- The manifest file can be divided into three parts
- CACHE MANIFEST-Start
- CACHE files listed under this heading will be cached after the first download
- NETWORK-The files listed under this heading require a connection to the server and will not be cached
- FALLBACK-The documents listed under this heading specify the fallback page when the page is inaccessible (such as a 404 page)
- CACHE MANIFEST description:
- CACHE MANIFEST, placed in the first line, is required:
CACHE ：
/theme.css
/logo.gif
/main.js
The above manifest file lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download these three files from the root directory of the website. Then, no matter when the user disconnects from the Internet, these resources are still available.
4. NETWORK description: The
NETWORK section stipulates that the file "login.asp" will never be cached and is unavailable when offline, such as
NETWORK:
login.asp
- FALLBACK description: The
FALLBACK section stipulates that if the Internet connection cannot be established, the specified resource will be used instead of the requested URL resource, such as:
FALLBACK:
/html5/ /404.html
Note: When html5 resources cannot be requested in offline state, use 404.html instead
- other:
- CACHE: Can be omitted, in this case, write the resources that need to be cached in CACHE MANIFEST
- You can specify multiple CACHE: NETWORK: FALLBACK:, no order restrictions
- # Indicates a comment, only when the content of the demo.appcache file changes or manually clear the cache, it will re-cache.
- Chrome can use chrome://appcache-internals/ tools and offline mode to debug and manage application cache
- Update cache:
Once the file is cached, the browser will continue to display the cached version, even if the file on the server is modified. In order to ensure that the browser updates the cache, it also needs to update the manifest file, which means that once the application is cached, it will remain cached until the following occurs: - User clears browser cache
- The manifest file is modified (see hint below)
- Update application cache by program
Note: Updating the date and version number in the comment line is a way to make the browser re-cache the file
Example-Complete Manifest file
CACHE MANIFEST
#上面一句代码是当前文档的第一句
#后面写的是注释
#需要缓存的文件清单列表
CACHE:
../imgs/1.jpg
../imgs/2.jpg
# *:代表所有文件
#配置每一次都需要从服务器获取的文件清单列表
NETWORK:
../imgs/3.jpg
#配置如果文件无法获取则使用指定的文件进行代替
FALLBACK:
../imgs/4.jpg ../imgs/5.jpg
# /:代表所有文件