Est-il mauvais de stocker des données temporaires dans un élément caché?

Question

Lors d'un entretien, une fois que j'ai assisté, j'ai été invité à en créer un script java, base de la fonctionnalité qui m'a dit de créer un formulaire (dis-je.e nom, prénom, e-mail, âge) et une liste(en fait le listing était une autre forme de stockage de plusieurs entrées) en dessous de ce formulaire. Sur en soumettant ce formulaire, une nouvelle ligne a été ajoutée à la liste. Toutefois, il est possible de supprimer précédemment ajouté la liste ligne. et après l'ajout de la suppression, enfin besoin de stocker cet état final de l'inscription. ( Genre de post de formulaire et des scripts côté serveur entre en image )

Donc, ce que j'ai fait, Sur le Formulaire de soumission, l'ajout d'un nouveau <tr> ligne dans le tableau de cotation en même temps, je sérialisé toutes les données du formulaire à l'exception bouton "soumettre" à l'aide de jQuery sérialiser et stockées dans un cache élément de formulaire d'inscription.

Sur la suppression de la cotation de ligne, j'ai enlever <tr> ligne avec respectifs élément masqué pour la même ligne.

Tous les travaillait comme très bien sans aucune erreur. Mais l'enquêteur m'a demandé que "La démarche que j'ai utilisée (éléments cachés) était vraiment bon?".

J'ai répondu, j'aurais pu utiliser du json? mais qui Pourrait ne pas craquer interview. Donc, je veux savoir quelle est la meilleure approche que l'On peut utiliser pour stocker les données dans de telles conditions?

Answer 1

Une autre approche pour le côté client est de garder une liste d'objets séparément et de les stocker uniquement la référence de chaque élément à l'intérieur d'une propriété de votre élément du DOM. Cette approche est très similaire à ce que jQuery $.fn.data() , et ces avantages:

1. Vous n'avez pas à sérialiser quoi que ce soit, les données restent dans leur format natif; il doit être dit que vous pourriez être atteint par l'ajout de la propriété ainsi.

2. Toutes vos données sont conservées dans un seul endroit au lieu de, éparpillés dans les DOM.

Ceci est un exemple de mise en œuvre:

(function(ns) {

var entries = {},
entryId = 1;

ns.Entries = {
   addEntry: function(data) {
     entries[entryId] = data;
     return entryId++;
   },
   getEntryById: function(id) {
     return entries[id] || null;
   }
};

}(this));

Appelant Entries.addEntry retourne un identifiant que vous pouvez stocker dans un des DOM propriétés d'un élément:

tr.entryId = Entries.addEntry(data);

Plus tard, vous pouvez l'utiliser entryId de la propriété pour trouver les données correspondantes dans la liste d'entrée et de l'utiliser.

var data = Entries.getEntryById(tr.entryId);

Démo

Bien sûr, cette fonctionnalité peut également être résolu du côté serveur en utilisant des sessions.

Answer 2

Grâce à HTML5, nous avons maintenant la possibilité d'intégrer des attributs de données personnalisés sur tous les éléments HTML. Ces nouveaux attributs de données personnalisés sont constitués de deux parties:

• Le Nom De L'Attribut Les données nom de l'attribut doit être au moins un caractère de long et doit être précédé de 'données'. Il ne doit pas contenir toutes les lettres majuscules.
• La Valeur De L'Attribut La valeur de l'attribut peut être n'importe quelle chaîne de caractères.

En utilisant cette syntaxe, nous pouvons ajouter des données d'application à notre balisage comme indiqué ci-dessous:

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul> 

Nous pouvons maintenant utiliser ces données enregistrées dans notre site de JavaScript pour créer un son plus riche et plus agréable l'expérience utilisateur. Imaginez que lorsqu'un utilisateur clique sur un légume un nouveau calque s'ouvre dans le navigateur affichant les semences supplémentaires à l'espacement et le semis des instructions. Grâce aux données - les attributs que nous avons ajoutés à notre <li> éléments, nous pouvons maintenant afficher cette information instantanément sans avoir à se soucier de faire toute les appels Ajax et sans avoir à faire côté serveur requêtes de base de données.

source: HTML5 Médecin

Il existe d'autres méthodes pour je crois.

Answer 3

En fait, au lieu d'utiliser des éléments cachés, vous pouvez ajouter des données aux éléments html à l'aide de jQuery. Il s'agit d'une meilleure approche pour rendre vos données un peu moins évidentes / directes aux utilisateurs. Vérifiez les données () dans jQuery.

Answer 4

Il n'y a rien de mal à stocker des données côté client si l'utilisateur peut leur faire confiance et rien de terrible n'arrive à votre système quand il se trompe.

Le seul problème que je peux voir avec l'utilisation de champs cachés (ou cookies) est qu'ils sont envoyés avec chaque demande, ce qui pourrait gaspiller la bande passante. Je ne sais pas si cela s'applique à votre cas, probablement pas, car vous dites que vous ne soumettez qu'une seule fois lorsque tout est terminé.

Answer 5

Le problème avec des solutions "juste travail", c'est qu'ils ne sont pas suffisamment abstrait et, par conséquent, ont tendance à causer des problèmes à l'avenir. Considérez votre exemple; si vous décidez de stocker les données temporaires dans les Locaux de Stockage (pour permettre aux utilisateurs de fermer leur navigateur et de revenir plus tard), il vous faudrait réécrire la façon dont vous stockez vos données. Si vous avez stocké dans une variable, vous seriez en mesure d'ajouter "Enregistrer pour le Stockage Local', tout comme 'Soumettre au serveur" ou "Passer à une Autre Fonction' fonctionnalité. Votre cachés "élément" approche doit être réécrite pour n'importe quel but, sauf l'affichage de service.