Utilice almacenamiento native con JavaScript.
A menudo quiero reescribir localStorage para implementar una determinada función. ¿Cuáles son los métodos para reescribir los métodos en localStorage? Hay muchos desarrolladores que quieren reescribir los métodos en localStoragepara realizar el tiempo de vencimiento de la clave, o para monitorear la lectura y escritura de la clave. Entonces, ¿cuáles son los métodos para anular los métodos en localStorage. Este es mi artículo número 43 en Medium.
A muchos desarrolladores les gusta la thought de reescribir, primero manteniendo el método unique y luego reescribiendo el método directamente en localStorage como se muestra a continuación.
Sin embargo, esta forma de escribir no anula el método. setItem()pero para agregar un setItem atribuir a localStorage. Cuando se declara el atributo de valor del método, el nativo setItem() El método se sobrescribe.
No lo he probado demasiado, pero en algunos navegadores, este atributo se ignorará y provocará que falle nuestra reescritura.
Si miramos de cerca, setItem y getItem se heredan del Almacenamiento. __proto__ pseudopropiedad.
Luego anulamos directamente lo anterior. localStorage.__proto__ método.
Esto implementa la anulación actual del setItem() método.
Pero todavía hay un problema aquí. Ambos localStorage y sessionStorage heredar de Almacenamiento. Después de reescribir las propiedades o métodos en localStorage.__proto__los métodos en sessionStorage también se reescriben.
No modificamos directamente el método de localStorage sí mismo, pero envuelva una capa en el exterior y luego use localStorage para realizar la función de almacenamiento en la capa inferior.
De esta manera, el grado de libertad es relativamente mayor y no hay ningún problema de compatibilidad en la Sección 1. Solo ha cambiado el nombre utilizado y las propiedades y métodos en localStorage están completamente bloqueados.
Si desea utilizar un objeto personalizado sin el paquete, debe implementar todas las propiedades y métodos. No es posible burlarse de un método como el anterior.
Usar Object.definePropertyo Proxyequivalente a anular por completo el localStorage variable. Mejor que la Sección 3 porque el nombre no ha cambiado.
4.1 Cobertura directa, sin efecto
Si utiliza el siguiente método para cubrir directamente, no tendrá ningún efecto.
window.localStorage = Object.create(null); console.log(window.localStorage); //nonetheless native
Obtenemos el descriptor de propiedad de localStorage a través de Object.getOwnPropertyDescriptor. Se puede encontrar que no hay ningún atributo escribible: verdadero, lo que significa que localStorage no se puede escribir directamente.
4.2 Anulación con Object.defineProperty
ya que no hay writableatributo, le agregaremos uno. Podemos anular localStorage con Object.defineProperty.
Pero no puedes usar el método de escritura anterior con una capa afuera. Si das directamente lo anterior myLocalStorage a localStorage entonces generará recursividad infinita (para evitar engaños, no se escribirá aquí el método de escritura incorrecto).
He hecho una copia de seguridad de localStorage aquí. Si necesita un método nativo, también puede utilizarlo.
En este artículo, no implementamos específicamente una función como establecer el tiempo de vencimiento. Pero habla sobre cómo reescribir. localStorage o los métodos que contiene desde otra perspectiva.
Más contenido en PlainEnglish.io. Regístrate en nuestro boletín semanal gratuito. Síguenos en Gorjeo, LinkedIn, YouTubey Discordia.
