0
votes

Est-il possible d'ajouter un élément HTML et toutes ses valeurs à localStorage?

Je construis un petit jeu JavaScript et je veux implémenter une boîte de score.
Ce que j'essaie de faire est; Chaque fois que l'utilisateur gagne, ajoutez un score de 5 à localStorage et l'affiche dans la zone Score. de
Si l'utilisateur gagne à nouveau, incrémentez le score dans localStorage +5 et affichez le score mis à jour.

J'ai créé la boîte de bord. J'ai également défini un score de 5 sur le stockage local et chaque fois que l'utilisateur gagne, 5 est affiché dans la cotebox p>

// voici la zone Score p>

if(typeof(Storage) !== "undefined") {
   localStorage.setItem('score', 5)
   let score = localStorage.getItem('score');
   scoreBox.innerText = score;
} else {
  console.error('Local Storage not supported!')
}


3 commentaires

amener la grange à la vache pas la vache à la grange


Pourquoi ne pas définir le score s'il y a une valeur lorsque la page est actualisée?


Je ne comprends pas s'il vous plait?


3 Réponses :


0
votes

Je ne pense pas que ce soit la bonne approche ici (bien sûr, je pourrais me tromper). Même si le jeu est simple, cela vous aidera beaucoup (pour des jeux plus complexes également) si vous stockez toutes vos données dans un état ou du type de contexte d'objet global.

Vous pouvez définir votre vue (le HTML dans votre cas), pour afficher la valeur qu'il se lit à partir de cet objet global. N'oubliez pas que vous stockez les données dans le localStorage, chaque fois que vous rechargez, vous pourrez afficher correctement les données mises à jour.

De la même manière, chaque mise à jour que vous faites sur cet objet peut déclencher une mise à jour de l'élément dans lequel elle est affichée. Cela vous aidera même à suivre les modifications que vous appliquez et assurez-vous qu'il n'y a pas de différences entre ce qui est stocké dans le localStorage et ce que l'utilisateur voit comme progrès.


3 commentaires

Merci! Comment puis-je continuer à stocker toutes mes données dans un état ou dans un type de contexte d'objet global à côté de travailler avec localStorage?


Eh bien, disons que vous aurez un état d'objet, comme celui-ci état = {score: 5}; Chaque fois que vous mettez à jour l'état, vous pouvez utiliser une fonction pour mettre à jour également le localStorage, comme UpdaTestorage () {localstorage.settem ('Score', State.Score)}


Pouvez-vous s'il vous plaît expliquer ce qu'est un état? J'ai essayé de mettre en œuvre cette suggestion et que j'ai SyntaxError non intracturé: extrémité inattendue de l'entrée Je suppose que j'ai utilisé l'état à tort



0
votes

Vous devez stocker les données dans la matrice dans localStorage puis récupérez les données à l'aide de chacun et ajoutez les valeurs


2 commentaires

Quelque chose comme ça Storescore (Score) {Laissez les joueurs. Soit Scorestored = localstorage.getem ("score"); Si (Storedscore === Null) {joutcore = []; } else {joueurscore = json.parse (stocké); } joutecore.push (score); localStorage.Setitem ("tâches", json.stringify (tâches)); }; ?


Si je stocke le score dans un tableau, je veux seulement un élément de la matrice qui est 5. Comment puis-je mettre à jour la matrice à +5 après chaque victoire?



0
votes

La façon dont je crois qu'il devrait ressembler est de stocker votre score initial, dans votre cas 5 dans un état mondial, par exemple dans un tableau. Chaque fois que les incréments de marquage de l'utilisateur par 5 l'ajoutent au score initial déjà défini dans votre état mondial. Ensuite, tout ce que vous avez à faire est de stocker le tableau dans votre stockage local, puis de le récupérer quand vous le souhaitez. XXX

Vous pouvez ensuite définir et obtenir "Formulaire de score localStorage".

J'espère que cela aide.


2 commentaires

Mon problème principal est maintenant d'obtenir le numéro de séjour dans la biberebox même après la recharge, je suis maintenant mis en œuvre pour obtenir 5 à afficher après une victoire, mais après rechargement de la valeur disparaît mais reste en localStorage.


Ce que je veux, c'est un affichage fixe, après la recharge, il doit toujours afficher 5, puis lorsque vous gagnez à nouveau, incrontez-la de 5. La boîte de bord devrait conserver la valeur de LocalStorage. Comment puis-je aller autour de cela s'il vous plaît?