html - entre - localstorage jquery

Almacenamiento local vs Cookies

Question

Quiero reducir los tiempos de carga en mis sitios web moviendo todas las cookies al almacenamiento local, ya que parecen tener la misma funcionalidad. ¿Existen ventajas y desventajas (especialmente en lo que respecta al rendimiento) en el uso de almacenamiento local para reemplazar la funcionalidad de las cookies, excepto por los obvios problemas de compatibilidad?

Answer 1

Bueno, la velocidad de almacenamiento local depende en gran medida del navegador que usa el cliente, así como del sistema operativo. Chrome o Safari en una mac podría ser mucho más rápido que Firefox en una PC, especialmente con las API más nuevas. Como siempre, sin embargo, la prueba es tu amiga (no pude encontrar ningún punto de referencia).

Realmente no veo una gran diferencia entre las cookies y el almacenamiento local. Además, debería preocuparse más por los problemas de compatibilidad: no todos los navegadores han empezado a admitir las nuevas API HTML5, por lo que las cookies serían su mejor opción en cuanto a velocidad y compatibilidad.

Answer 2

Con localStorage , las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario. Antes de HTML5, los datos de la aplicación debían almacenarse en cookies, incluidos en cada solicitud del servidor. localStorage es más seguro y se pueden almacenar grandes cantidades de datos localmente, sin afectar el rendimiento del sitio web. Aunque localStorage es más moderno, existen algunas ventajas y desventajas de ambas técnicas.

Galletas

Pros

• Apoyo legado (ha existido desde siempre)
• Datos persistentes
• Fechas de vencimiento

Contras

• Cada dominio almacena todas sus cookies en una sola cadena, lo que puede dificultar el análisis de los datos.
• Los datos no están encriptados, lo que se convierte en un problema porque ... ... aunque de tamaño pequeño, las cookies se envían con cada solicitud HTTP Tamaño limitado (4 KB)
• La inyección de SQL se puede realizar desde una cookie

Almacenamiento local

Pros

• Soporte por la mayoría de los navegadores modernos.
• Datos persistentes que se almacenan directamente en el navegador.
• Reglas del mismo origen se aplican a los datos de almacenamiento local
• No se envía con cada solicitud HTTP
• ~ 5MB de almacenamiento por dominio (eso es 5120KB)

Contras

• No es compatible con nada antes: IE 8, Firefox 3.5, Safari 4, Chrome 4, Opera 10.5, iOS 2.0, Android 2.0
• Si el servidor necesita información almacenada del cliente, debe enviarla a propósito.

localStorage uso de localStorage es casi idéntico al de la sesión uno. Tienen métodos bastante exactos, por lo que cambiar de sesión a localStorage es realmente un juego de niños. Sin embargo, si los datos almacenados son realmente cruciales para su aplicación, probablemente utilizará cookies como respaldo en caso de que localStorage no esté disponible. Si desea verificar el soporte del navegador para localStorage , todo lo que tiene que hacer es ejecutar este sencillo script:

/*
* function body that test if storage is available
* returns true if localStorage is available and false if it''s not
*/
function lsTest(){
var test = ''test'';
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch(e) {
return false;
}
}
/*
* execute Test and run our custom script
*/
if(lsTest()) {
// window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
window.localStorage.setItem(name, 1);
console.log(''localStorage where used''); // log
} else {
document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
console.log(''Cookie where used''); // log
}

"los valores de localStorage en las páginas seguras (SSL) están aislados", como alguien notó, tenga en cuenta que localStorage no estará disponible si cambia del protocolo seguro ''http'' al ''https'', donde la cookie seguirá siendo accesible. Es importante tener esto en cuenta si trabaja con protocolos seguros.

Answer 3

El almacenamiento local puede almacenar hasta 10 mb datos fuera de línea, mientras que la sesión puede almacenar hasta 5 mb datos. Pero las cookies solo pueden almacenar datos de 4kb en formato de texto.

Answer 4

Las cookies y el almacenamiento local sirven para diferentes propósitos. Las cookies son principalmente para el lado del servidor de lectura, el almacenamiento local solo puede ser leído por el lado del cliente . Entonces, la pregunta es, en su aplicación, ¿quién necesita estos datos: el cliente o el servidor?

Si es tu cliente (tu JavaScript), entonces por todos los medios cambiar. Usted está perdiendo ancho de banda enviando todos los datos en cada encabezado HTTP.

Si es su servidor, el almacenamiento local no es tan útil porque tendría que reenviar los datos de alguna manera (con Ajax o campos de formulario ocultos o algo así). Esto podría estar bien si el servidor solo necesita un pequeño subconjunto de los datos totales para cada solicitud.

Sin embargo, querrás dejar tu cookie de sesión como una cookie.

Según la diferencia técnica, y también mi comprensión:

1. Además de ser una forma antigua de guardar datos, las cookies le dan un límite de 4096 bytes (4095, en realidad), es por cookie. El almacenamiento local es tan grande como 5MB por dominio - SO Question también lo menciona

2. localStorage es una implementación de la interfaz de Storage . Almacena datos sin fecha de caducidad , y se borra solo a través de JavaScript, o borra el caché del navegador / datos almacenados localmente, a diferencia de la caducidad de las cookies.

Answer 5

También vale la pena mencionar que localStorage no se puede usar cuando los usuarios navegan en modo "privado" en algunas versiones de Safari móvil.

Citado de MDN ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ):

Nota: A partir de iOS 5.1, Safari Mobile almacena los datos de almacenamiento local en la carpeta de caché, que está sujeta a una limpieza ocasional, a instancias del sistema operativo, generalmente si hay poco espacio. El modo de navegación privada de Safari Mobile también evita la escritura en localStorage por completo.

Answer 6

En el contexto de los JWT , Stormpath ha escrito un artículo bastante útil que describe las posibles formas de almacenarlos y las (des-) ventajas relacionadas con cada método.

También tiene una breve descripción de los ataques XSS y CSRF, y cómo puedes combatirlos.

He adjuntado algunos fragmentos breves del artículo a continuación, en caso de que el artículo se desconecte o se desactive su sitio.

Almacenamiento local

Problemas:

Se puede acceder al almacenamiento web (localStorage / sessionStorage) a través de JavaScript en el mismo dominio. Esto significa que cualquier JavaScript que se ejecute en su sitio tendrá acceso al almacenamiento web, y debido a esto puede ser vulnerable a ataques de scripts entre sitios (XSS). XSS en pocas palabras es un tipo de vulnerabilidad en la que un atacante puede inyectar JavaScript que se ejecutará en su página. Los ataques básicos de XSS intentan inyectar JavaScript a través de entradas de formulario, donde el atacante pone alerta (''Eres hackeado''); en un formulario para ver si es ejecutado por el navegador y puede ser visto por otros usuarios.

Prevención:

Para evitar XSS, la respuesta común es escapar y codificar todos los datos que no son de confianza. Pero esto está lejos de la historia completa. En 2015, las aplicaciones web modernas usan JavaScript alojado en CDN o infraestructura externa. Las aplicaciones web modernas incluyen bibliotecas de JavaScript de terceros para pruebas A / B, análisis de mercado / embudo y anuncios. Usamos administradores de paquetes como Bower para importar el código de otras personas a nuestras aplicaciones.

¿Qué pasa si solo uno de los scripts que utiliza está comprometido? El JavaScript malicioso se puede incrustar en la página, y el almacenamiento web está comprometido. Estos tipos de ataques XSS pueden obtener el almacenamiento web de todos los usuarios que visita su sitio, sin su conocimiento. Probablemente esta sea la razón por la que varias organizaciones aconsejan no almacenar nada de valor o confiar en ninguna información en el almacenamiento web. Esto incluye identificadores de sesión y tokens.

Como mecanismo de almacenamiento, el almacenamiento web no impone ningún estándar seguro durante la transferencia. Quienquiera que lea el almacenamiento web y lo use debe hacer su debida diligencia para asegurarse de que siempre envíe el JWT a través de HTTPS y nunca HTTP.

Galletas

Problemas:

Las cookies, cuando se usan con la marca de cookie HttpOnly, no son accesibles a través de JavaScript y son inmunes a XSS. También puede establecer el indicador de cookie segura para garantizar que la cookie solo se envíe a través de HTTPS. Esta es una de las razones principales por las que las cookies se han aprovechado en el pasado para almacenar tokens o datos de sesión. Los desarrolladores modernos dudan en usar cookies porque tradicionalmente requerían que el estado fuera almacenado en el servidor, rompiendo así las mejores prácticas REST. Las cookies como mecanismo de almacenamiento no requieren que el estado se almacene en el servidor si está almacenando un JWT en la cookie. Esto se debe a que JWT encapsula todo lo que el servidor necesita para atender la solicitud.

Sin embargo, las cookies son vulnerables a un tipo de ataque diferente: falsificación de solicitud entre sitios (CSRF). Un ataque CSRF es un tipo de ataque que ocurre cuando un sitio web, correo electrónico o blog malicioso hace que el navegador web de un usuario realice una acción no deseada en un sitio confiable en el que el usuario está autenticado actualmente. Esta es una vulnerabilidad de cómo el navegador maneja las cookies. Una cookie solo se puede enviar a los dominios en los que está permitida. Por defecto, este es el dominio que originalmente estableció la cookie. La cookie se enviará para una solicitud independientemente de si está en galaxies.com o hahagonnahackyou.com.

Prevención:

CSRF se puede prevenir usando patrones de token sincronizados. Esto suena complicado, pero todos los marcos web modernos tienen soporte para esto.

Por ejemplo, AngularJS tiene una solución para validar que solo su dominio puede acceder a la cookie. Directamente desde la documentación de AngularJS:

Al realizar solicitudes XHR, el servicio $ http lee un token de una cookie (de forma predeterminada, XSRF-TOKEN) y lo establece como un encabezado HTTP (X-XSRF-TOKEN). Dado que solo JavaScript que se ejecuta en su dominio puede leer la cookie, su servidor puede estar seguro de que el XHR proviene de JavaScript que se ejecuta en su dominio. Puede hacer que esta protección CSRF sea sin estado incluyendo un reclamo xsrfToken JWT:

{
"iss": "http://galaxies.com",
"exp": 1300819380,
"scopes": ["explorer", "solar-harvester", "seller"],
"sub": "[email protected]",
"xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e"
}

Aprovechar la protección CSRF de su marco de aplicación web hace que las cookies sean sólidas para almacenar un JWT. CSRF también se puede prevenir parcialmente al verificar el HTTP Referer y el encabezado de origen de su API. Los ataques CSRF tendrán encabezados de referencia y origen que no están relacionados con su aplicación.

El artículo completo se puede encontrar aquí: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

También tienen un artículo útil sobre cómo diseñar e implementar JWT de la mejor manera, con respecto a la estructura del token en sí: https://stormpath.com/blog/jwt-the-right-way/