Uno, el uso de sessionStorage
1.存储数据到本地，存储的容量5mb左右
2.这个数据的本质是存储在当前页面的内存中
3.它的生命周期为关闭当前页面，关闭页面数据会自动清除
api:
- setItem (clave, valor): almacenar datos, almacenarlos en pares clave-valor
- getItem (clave): Obtener datos, obtener el valor correspondiente a través de la clave del nombre especificado
- removeItme (clave): eliminar datos, eliminar el valor correspondiente a través de la clave con el nombre especificado
- clear (): borra todo el contenido almacenado
window.sessionStorage.setItem('id', 1)
window.sessionStorage.getItem('id')
window.sessionStorage.removeItem('id')
window.sessionStorage.clear()
En segundo lugar, el uso de localStorage
1.存储的容量20mb左右
2.在不同浏览器不能共享数据，但是在同一个浏览器的不同窗口可以共享数据
3.永久生效。它的数据存储在硬盘上，并不会随着页面或者浏览器的关闭而清除
api:
- setItem (clave, valor): almacenar datos, almacenarlos en pares clave-valor
- getItem (clave): Obtener datos, obtener el valor correspondiente a través de la clave del nombre especificado
- removeItme (clave): eliminar datos, eliminar el valor correspondiente a través de la clave con el nombre especificado
- clear (): borra todo el contenido almacenado
window.localStorage.setItem('id', 1)
window.localStorage.getItem('id')
window.localStorage.removeItem('id')
window.localStorage.clear()
Tres, caché de la aplicación
1. Concepto
Utilice HTML5 para crear fácilmente una versión sin conexión de una aplicación web mediante la creación de un archivo de manifiesto de caché
2. Ventajas:
- Recursos configurables para almacenar en caché
- Las aplicaciones siguen disponibles sin conexión a la red
- Leer recursos de caché localmente, mejorar la velocidad de acceso y mejorar la experiencia del usuario
- Reducir las solicitudes y la carga del servidor de caché
3. Base del manifiesto de caché:
- Para habilitar el almacenamiento en caché de la aplicación, incluya el atributo de manifiesto en la etiqueta del documento:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
- Cada página con un manifiesto específico se almacenará en caché cuando el usuario la visite. Si no se especifica el atributo de manifiesto, la página no se almacenará en caché (a menos que la página se especifique directamente en el archivo de manifiesto).
- La extensión de archivo recomendada para el archivo de manifiesto es: ".appcache".
- Tenga en cuenta que el archivo de manifiesto debe configurarse con el tipo MIME correcto, a saber, "texto / caché-manifiesto". Debe estar configurado en el servidor web
4. Archivo de manifiesto:
- Concepto: el archivo de manifiesto es un archivo de texto simple que le dice al navegador qué se almacena en caché (y qué no)
- El archivo de manifiesto se puede dividir en tres partes
- CACHE MANIFEST-Inicio
- Los archivos CACHE enumerados bajo este encabezado se almacenarán en caché después de la primera descarga
- RED: los archivos enumerados bajo este encabezado requieren una conexión al servidor y no se almacenarán en caché
- FALLBACK: los documentos enumerados bajo este encabezado especifican la página de respaldo cuando la página es inaccesible (como una página 404)
- Descripción de CACHE MANIFEST:
- CACHE MANIFEST, colocado en la primera línea, es obligatorio:
CACHE ：
/theme.css
/logo.gif
/main.js
El archivo de manifiesto anterior enumera tres recursos: un archivo CSS, una imagen GIF y un archivo JavaScript. Cuando se carga el archivo de manifiesto, el navegador descargará estos tres archivos del directorio raíz del sitio web. Entonces, independientemente de cuándo el usuario se desconecte de Internet, estos recursos seguirán estando disponibles.
4. Descripción de la RED: La
sección RED estipula que el archivo "login.asp" nunca se almacenará en caché y no estará disponible cuando esté desconectado, como
NETWORK:
login.asp
- Descripción de FALLBACK: La
sección FALLBACK estipula que si no se puede establecer la conexión a Internet, se utilizará el recurso especificado en lugar del recurso de URL solicitado, como por ejemplo:
FALLBACK:
/html5/ /404.html
Nota: Cuando los recursos html5 no se pueden solicitar en estado fuera de línea, utilice 404.html en su lugar
- otro:
- CACHE: se puede omitir, en este caso, escriba los recursos que deben almacenarse en caché en CACHE MANIFEST
- Puede especificar múltiples CACHE: NETWORK: FALLBACK :, sin restricciones de pedido
- # Indica un comentario, solo cuando el contenido del archivo demo.appcache cambia o borra manualmente la caché, se volverá a almacenar en caché.
- Chrome puede usar chrome: // appcache-internals / tools y el modo fuera de línea para depurar y administrar la caché de la aplicación.
- Actualizar caché: una
vez que el archivo está en caché, el navegador seguirá mostrando la versión en caché, incluso si se modifica el archivo en el servidor. Para asegurarse de que el navegador actualice la caché, también necesita actualizar el archivo de manifiesto, lo que significa que una vez que la aplicación se almacena en caché, permanecerá en caché hasta que ocurra lo siguiente: - El usuario borra la caché del navegador
- El archivo de manifiesto se modifica (consulte la sugerencia a continuación)
- Actualizar la caché de la aplicación por programa
Nota: Actualizar la fecha y el número de versión en la línea de comentarios es una forma de hacer que el navegador vuelva a almacenar en caché el archivo.
Ejemplo: archivo de manifiesto completo
CACHE MANIFEST
#上面一句代码是当前文档的第一句
#后面写的是注释
#需要缓存的文件清单列表
CACHE:
../imgs/1.jpg
../imgs/2.jpg
# *:代表所有文件
#配置每一次都需要从服务器获取的文件清单列表
NETWORK:
../imgs/3.jpg
#配置如果文件无法获取则使用指定的文件进行代替
FALLBACK:
../imgs/4.jpg ../imgs/5.jpg
# /:代表所有文件