Le stockage de données dans LocalStorage est utile, mais ce n'est pas une bonne solution lorsque vous stockez des données qui doivent être partagées sur plusieurs appareils ou navigateurs.
Par exemple, disons que vous souhaitez afficher un modal de bienvenue à tous les nouveaux utilisateurs qui s'inscrivent à votre produit. Si vous utilisez LocalStorage pour suivre si un utilisateur a déjà vu ce modal, vos utilisateurs continueront à obtenir l'expérience encore et encore chaque fois qu'il change les appareils ou les navigateurs.
C'est là que RemoteStorage entre en jeu. En utilisant la même API que LocalStorage, RemoteStorage vous permet de lire et d'écrire facilement des données à la volée tout en maintenant l'état entre les navigateurs et les appareils afin de fournir une meilleure expérience utilisateur.
Installez la bibliothèque à l'aide de votre gestionnaire de packages préféré:
npm install remote-storageOu l'incluez-le simplement dans votre HTML:
< script src =" https://unpkg.com/remote-storage@latest/dist/remote-storage.min.js " sync > </ script >Importez la bibliothèque et utilisez-la comme vous le feriez local:
import { RemoteStorage } from 'remote-storage'
const remoteStorage = new RemoteStorage ( { userId : "my-user-id" } )
const hasSeenNewFeature = await remoteStorage . getItem ( 'hasSeenNewFeature' )
if ( ! hasSeenNewFeature ) {
await remoteStorage . setItem ( 'hasSeenNewFeature' , true )
// Highlight your new and exciting feature!
}C'est ça!
RemoteStorage utilise des ID utilisateur pour identifier les utilisateurs. Un ID utilisateur est une chaîne qui identifie uniquement un utilisateur. Il peut s'agir de tout ce que vous voulez, mais nous vous recommandons d'utiliser un UUID non itérable pour empêcher les utilisateurs de deviner d'autres ID utilisateur et d'accéder à leurs données.
L'ID utilisateur est défini lorsque vous créez une nouvelle instance de RemoteStorage:
const remoteStorage = new RemoteStorage ( {
userId : '123e4567-e89b-12d3-a456-426614174000'
} )Si vous ne fournissez pas d'identification utilisateur, RemoteStorage générera un UUID aléatoire qui changera chaque fois que l'utilisateur visite votre site. Ceci est utile pour les tests, mais bat le but de RemoteStorage car les données ne persisteront pas entre les appareils ou les navigateurs.
RemoteStorage utilise des ID d'instance pour identifier l'instance d'application qui fait la demande. Un ID d'instance est une chaîne qui identifie uniquement une instance d'application. En règle générale, vous utiliseriez le même ID d'instance pour toutes les demandes de la même instance d'application.
L'ID d'instance est défini lorsque vous créez une nouvelle instance de RemoteStorage:
const remoteStorage = new RemoteStorage ( {
userId : '123e4567-e89b-12d3-a456-426614174000' ,
instanceId : 'my-cool-app'
} ) Nous proposons un serveur communautaire hébergé gratuit sur https://api.remote.storage (le comportement par défaut si aucun serverAddress n'est fourni). Ce serveur hébergé ne doit pas être utilisé pour les applications de production, mais c'est idéal pour les tests et le prototypage.
Pour utiliser un serveur différent, passez simplement l'option serverAddress lors de la création d'une nouvelle instance de RemoteStorage:
const remoteStorage = new RemoteStorage ( {
serverAddress : 'https://api.remote.storage' ,
userId : '123e4567-e89b-12d3-a456-426614174000' ,
instanceId : 'my-cool-app'
} )Le serveur peut être tourné à l'aide de Docker en quelques minutes. Voir la documentation du serveur pour plus d'informations.
RemoteStorage ne doit être utilisé que pour les données non sensibles. Nous vous recommandons de l'utiliser pour des choses comme les préférences des utilisateurs, les paramètres et d'autres données non sensibles. En raison de la nature de l'API publique, ce n'est pas un bon choix pour le stockage de données sensibles comme les mots de passe ou PII.
LocalStorage est une API du navigateur qui vous permet de stocker des données dans le navigateur. Les données sont stockées localement sur l'appareil de l'utilisateur et ne sont pas partagées entre les appareils ou les navigateurs. RemoteStorage est une bibliothèque qui combine l'API localStorage avec un serveur distant pour persister des données sur les navigateurs et les appareils.
RemoteStorage peut être utilisé sans aucune authentification, mais nous vous recommandons fortement d'utiliser JSON Web Tokens (JWT) pour authentifier les demandes au serveur. Cela peut être fait en définissant la variable d'environnement JWT_SECRET dans .env sur votre secret JWT pour le serveur. Voir la documentation du serveur pour plus d'informations.
Les demandes de traction sont toujours les bienvenues. Notez que si vous allez proposer des modifications drastiques, assurez-vous d'abord d'ouvrir un problème de discussion. Cela garantira que votre RP sera accepté avant de commencer à y travailler.
Pour tout problème existant qui n'a pas encore de contributeur assigné, n'hésitez pas à commenter la question si vous souhaitez y travailler. Nous vous attribuerons le problème si nous pensons que vous êtes un bon choix.
Faire des modifications: implémentez votre correction de bogue ou votre fonctionnalité, écrivez des tests pour le couvrir et assurez-vous que tous les tests passent. Assurez-vous que votre engagement exploite les messages de validation sémantique et que votre message de validation suit le format conventionnel des engagements. Ouvrez ensuite une demande de traction vers la branche principale.
