如何动态存储有关HTML元素的信息？

Question

Should I use a data structure, like a Dictionary of data objects, keyed on element ID, or simply attach 'data-' attributes with the required data to the elements? The number of properties needed to be stored for each element is only one or two.

Is there already a Dictionary object for JavaScript somewhere (or maybe TypeScript), or even better, an in memory database type structure I can use to manage multiple data structures together?

Answer 1

If you need to store only a couple of values I would use data- attributes - or jQuery data accessors.

Any object in JavaScript is a dictionary, and you can 'type' them in TypeScript easily:

interface DictionaryOfStrings {
  [key: string]: string;
}

var a: DictionaryOfStrings;

a["first"] = "first value";
a["second"] = "second value";

for (var key in a) {
  console.log("Value of '" + key + "' is '" + a[key] + "'");
}

Answer 2

Any reason you can't use a simple data-binding framework like Knockoutjs for this? This is what I'd do in this case.

(This is my answer, not comment, even though phrased as a question, moderators)

Answer 3

If you do need a dictionary structure in JS, Linq.js has one you may be able to use or adapt. TS definition files are available at Definitely Typed :

interface Dictionary {
    Add(key, value): void;
    Get(key): any;
    Set(key, value): bool;
    Contains(key): bool;
    Clear(): void;
    Remove(key): void;
    Count(): number;
    ToEnumerable(): Enumerable;
}

Whether you need something like this, or can rely on data- parameters, is going to come down to the detailed needs of your app, and personal choice.