Utilisez localStorage avec JavaScript.
J’ai souvent envie de réécrire localStorage pour implémenter une certaine fonction. Quelles sont les méthodes pour réécrire les méthodes dans localStorage? De nombreux développeurs souhaitent réécrire les méthodes dans localStoragepour connaître le délai d’expiration de la clé ou pour surveiller la lecture et l’écriture de la clé. Alors, quelles sont les méthodes pour remplacer les méthodes dans localStorage. Ceci est mon 43e article sur Medium.
De nombreux développeurs aiment l’idée de réécrire, en gardant d’abord la méthode d’origine, puis en réécrivant la méthode directement sur localStorage comme ci-dessous.
Cependant, cette façon d’écrire ne prévaut pas sur la méthode setItem()mais pour ajouter un setItem attribuer à localStorage. Lorsque l’attribut worth de la méthode est déclaré, le natif setItem() méthode est écrasée.
Je ne l’ai pas trop testé, mais dans certains navigateurs, cet attribut sera ignoré et entraînera l’échec de notre réécriture.
Si nous regardons de près, setItem et getItem sont hérités de Storage __proto__ pseudo-propriété.
Ensuite, nous remplaçons directement ce qui précède localStorage.__proto__ méthode.
Cela implémente le remplacement réel de la setItem() méthode.
Mais il y a toujours un problème ici. Les deux localStorage et sessionStorage hériter de Stockage. Après avoir réécrit les propriétés ou les méthodes sur localStorage.__proto__les méthodes de sessionStorage sont également réécrits.
Nous ne modifions pas directement la méthode de localStorage lui-même, mais enveloppez une couche à l’extérieur, puis utilisez localStorage pour réaliser la fonction de stockage à la couche inférieure.
De cette façon, le degré de liberté est relativement plus élevé, et il n’y a pas de problème de compatibilité dans la part 1. Seul le nom utilisé a changé et les propriétés et méthodes dans localStorage sont complètement bloqués.
Si vous souhaitez utiliser un objet personnalisé sans le pack, vous devez implémenter toutes les propriétés et méthodes. Il n’est pas potential de se moquer d’une méthode seule comme ci-dessus.
Utiliser Object.definePropertyou Proxyéquivaut à remplacer complètement le localStorage variable. Mieux que la part 3 en ce sens que le nom n’a pas changé.
4.1 Couverture directe, sans effet
Si vous utilisez la méthode suivante pour couvrir directement, cela n’aura aucun effet.
window.localStorage = Object.create(null); console.log(window.localStorage); //nonetheless native
On obtient le descripteur de propriété de localStorage à travers Object.getOwnPropertyDescriptor. On peut constater qu’il n’y a pas d’attribut writable: true, ce qui signifie que localStorage n’est pas directement inscriptible.
4.2 Remplacement avec Object.defineProperty
Puisqu’il n’y a pas writableattribut, nous en ajouterons un. Nous pouvons passer outre localStorage avec Object.defineProperty.
Mais vous ne pouvez pas utiliser la méthode d’écriture ci-dessus avec une couche à l’extérieur. Si vous donnez directement ce qui précède myLocalStorage pour localStorage alors il générera une récursivité infinie (pour éviter toute erreur, la mauvaise méthode d’écriture ne sera pas écrite ici).
j’ai fait une sauvegarde de localStorage ici. Si vous avez besoin d’une méthode native, vous pouvez également l’utiliser.
Dans cet article, nous n’implémentons pas spécifiquement une fonction telle que la définition du délai d’expiration. Mais parler de la façon de réécrire localStorage ou les méthodes qu’il contient d’un autre level de vue.
Plus de contenu sur PlainEnglish.io. Inscrivez-vous à notre publication hebdomadaire gratuite. Suivez-nous sur Twitter, LinkedIn, Youtubeet Discorde.
