Preguntas de la entrevista de cinco minutos: similitudes y diferencias entre LocalStorage y SessionStorge

prefacio

Viernes Santo, hermanos. Después de la reciente ola de despidos en las principales fábricas, los jóvenes que estaban estudiando juntos dejaron 卷de motivarse para continuar. ¡Todos continuaron apresurándose a responder una pregunta de entrevista hoy! ! !

Con respecto al estado actual de la comunidad técnica, analicé los retratos de los usuarios y sentí que la mayoría de los usuarios prefieren artículos de frecuencia corta y de ritmo rápido, por lo que trato de desenterrar preguntas de entrevistas simples en el menor tiempo posible, y organizar y compartir el conocimiento detrás. Me gusta el proceso de la entrevista de seguimiento, espero poder ayudarlo, si se trata de su propio área ciega de conocimiento, es posible que desee apoyarlo.

antecedentes

En el proceso de entrevistar a candidatos recientemente, a menudo es difícil obtener del currículum en qué es bueno o en qué está familiarizado y llevar a cabo una comunicación profunda, por lo que tengo que preguntar algunos 八股文conceptos básicos para ver la profundidad de la comprensión del candidato de un simple punto. Esta vez comenzamos desde el almacenamiento Web storage APIlocal para preguntar sobre la diferencia entre estas dos funciones de uso común.

Uso de la API de almacenamiento

Cabe señalar aquí que en realidad ambos tienen el mismo objeto prototipo Storage. ¡Creo que debería ser una gran ventaja si puede responder esto durante el proceso de la entrevista!

El almacenamiento web incluye los dos mecanismos siguientes:

sessionStorage Mantiene un área de almacenamiento separada para cada origen dado que está disponible durante una sesión de página (es decir, siempre que el navegador esté abierto, incluidas las recargas y restauraciones de página).
localStorage Misma funcionalidad, pero los datos persisten después de que el navegador se cierra y luego se vuelve a abrir.

Como interfaz de la API de almacenamiento web, Storageproporciona la función de acceder al almacenamiento de sesión o almacenamiento local bajo un nombre de dominio específico, por ejemplo, puede agregar, modificar o eliminar elementos de datos almacenados.

Atributos

Storage.length solo lectura

Devuelve un número entero que representa Storage el número de elementos de datos almacenados en el objeto.

método

Storage.key()

Este método acepta un valor numérico n como parámetro y devuelve el n-ésimo nombre de clave en la tienda.
Storage.getItem()

Este método acepta un nombre de clave como parámetro y devuelve el valor correspondiente al nombre de clave.
Storage.setItem()

该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.removeItem()

该方法接受一个键名作为参数，并把该键名从存储中删除。
Storage.clear()

调用该方法会清空存储中的所有键名。

localStorage & sessionStorage 最明显区别

存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

上面提到的这点，应该大部分同学都知道的区别，两者应用业务场景不同。

当点击某个链接打开新的Tab页面的同时，sessionStorage 将不会继承到新的页面上，即使新的 Tab 页面是符合同源策略，sessionStorage 是和当前Tab页相关

兼容性差异

验证当前浏览器是否可用

从上面 caniuse 的截图不难看出，存在不同的浏览器兼容差异，为了能够使用 localStorage，我们应该首先验证它是否在当前浏览会话中受支持并可用。

支持 localStorage 的浏览器将在窗口对象上具有一个名为 localStorage 的属性。但是，仅断言该属性存在可能会引发异常。如果 localStorage 确实存在，则仍然不能保证 localStorage 实际可用，因为各种浏览器都提供了禁用 localStorage 的设置。因此，浏览器可能支持localStorage，但不适用于页面上的脚本。

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}
复制代码

在这里进行调用

if (storageAvailable('localStorage')) {
  // 可以使用
}
else {
  // 用不了 呜呜呜~
}
复制代码

存储空间

localStorage 和 sessionStorage 都有存储空间，万一我们设置保存的字符串长度过大，我们是需要统计当前保存空间是否已经超出了限制，如果超出了，我们需要提示用户，或者清空存储。

验证 5MB 存储空间

var a = Array(5 * 1024 * 1024).fill(0).join(''); // 超过 5MB大小的字符串

localStorage.setItem('a', a);
// VM1793:1 Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'b' exceeded the quota.
复制代码

两者对比

下面我们总结一下他们的差异

	localStorage	sesiónAlmacenamiento
gramática	Heredar métodos de `Storage`prototipo	Heredar métodos de `Storage`prototipo
uso	Los datos almacenados en `localStorage` pueden conservarse durante mucho tiempo	Cuando se cierra la página, `sessionStorage` los datos almacenados en se borrarán
tamaño de almacenamiento	Generalmente 5Mb, diferentes navegadores son diferentes	5 MB
Diferencias de compatibilidad	Mira caniuse en detalle	Mira caniuse en detalle
Oyente de eventos de almacenamiento	Los cambios pueden ser monitoreados	Los cambios pueden ser monitoreados

resumen

Este artículo termina aquí. Es probable que haya errores debido al nivel limitado. Bienvenido a hacer correcciones. Finalmente, espero que me puedan ayudar y me den pulgar arriba, esto es una gran afirmación y motivación para mi creación. espero que yo puedo ayudarle

Referencia del artículo

desarrollador.mozilla.org/zh-CN/docs/…
desarrollador.mozilla.org/zh-TW/docs/…
gist.github.com/paulirish/5…