Utilisez localStorage avec JavaScript.
J’ai souvent envie de réécrire localStorage pour mettre en œuvre 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 Medium.
De nombreux développeurs aiment l’idée de réécrire, en conservant 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 remplace pas la méthode setItem()mais pour ajouter un setItem attribuer à localStorage. Lorsque l’attribut value de la méthode est déclaré, le natif setItem() la 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 attentivement, 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 véritable remplacement du 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 dans 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 au niveau de 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 section 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 possible de se moquer d’une méthode seule comme celle ci-dessus.
Utiliser Object.definePropertyou Proxyéquivalent à remplacer complètement le localStorage variable. Mieux que la section 3 dans la mesure où 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); //still 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 y ajouterons un. Nous pouvons passer outre localStorage avec Object.defineProperty.
Mais vous ne pouvez pas utiliser la méthode d’écriture ci-dessus avec un seul calque à l’extérieur. Si vous donnez directement ce qui précède myLocalStorage à localStorage alors cela générera une récursion infinie (pour éviter toute tromperie, 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 parlons de la façon de réécrire localStorage ou les méthodes qu’il contient sous un autre angle.
Plus de contenu sur PlainEnglish.io. Inscrivez-vous à notre newsletter hebdomadaire gratuite. Suivez-nous sur Twitter, LinkedIn, Youtubeet Discorde.
