Tutorial sobre el uso de LocalStorage en HTML5

Este artículo presenta principalmente el tutorial sobre el uso de LocalStorage en HTML5. LocalStorage se utiliza para la interacción saliente local entre el navegador y el sistema. Los amigos que lo necesitan pueden referirse a lo que es LocalStorage

Hace unos días, descubrí que había una extraña operación de cookies en un proyecto antiguo. Después de la consulta, quería almacenar en caché de información para evitar pasar los parámetros en la URL, pero no consideré qué problemas traería las cookies:

① El tamaño de la cookie está limitado a aproximadamente 4K, que no es adecuado para almacenar datos comerciales.

② Las cookies se envían con transacciones HTTP cada vez, desperdiciando el ancho de banda

Estamos haciendo proyectos móviles, por lo que la tecnología real que es adecuada para su uso aquí es LocalStorage. Se puede decir que el almacenamiento local es una optimización de las cookies. El uso de TI puede facilitar el almacenamiento de datos en el lado del cliente y no se transmitirá con HTTP, pero no está exento de problemas:

① El tamaño del almacenamiento local está limitado a aproximadamente 5 millones de caracteres, y cada navegador es inconsistente

② LocalStorage no es legible en el modo de privacidad

③ LocalStorage es esencialmente leyendo y escribiendo archivos. Si hay demasiados datos, estará más atascado (Firefox importará datos a la memoria al mismo tiempo, y será aterrador si lo piensa)

④ LocalStoray no puede ser arrastrado por los rastreadores, no lo use para reemplazar por completo los parámetros de URL

Los defectos no ocultan los méritos, y se pueden evitar todos los problemas anteriores, por lo que nuestro enfoque debe estar en cómo usar LocalStorage y cómo usarlos correctamente.

Uso de LocalStorage

Hay dos tipos de objetos de almacenamiento de almacenamiento local:

① Sessionstrage: Sesión significa sesión. Aquí la sesión se refiere al período de validez del objeto de sesión es solo tan largo cuando un usuario navega por cierto sitio web.

② LocalStorage: Guarde los datos en el dispositivo de hardware del cliente, sin importar lo que sea, significa que los datos todavía están allí la próxima vez que abra la computadora.

La diferencia entre los dos es que uno es la preservación temporal y la otra es la preservación a largo plazo.

Aquí hay un código simple para ilustrar su uso básico: