自定义数据存储_存储自定义数据的新方法

自定义数据存储

There’s a lot of interesting new features being suggested for HTML5 and XHTML2. Some of them are extremely useful, some of them seem to be more questionable additions. One feature being implemented in HTML5 that I do like is the addition of custom data attributes to HTML elements.

对于HTML5和XHTML2，建议了许多有趣的新功能。 其中一些功能极为有用，其中一些功能似乎更值得怀疑。 我喜欢用HTML5实现的一项功能是向HTML元素添加自定义数据属性。

管理资料 (Manage Your Data)

A custom data attribute is simply any attribute starting with the string “data-”. They can be used to store data that you want kept private to the page (not viewable by the user) in cases where there is no appropriate attribute available. Every element can have any number of custom data attributes.

定制数据属性就是任何以字符串“ data-”开头的属性。 在没有适当属性可用的情况下，它们可用于存储您想要保留给页面私有(用户无法查看)的数据。 每个元素可以具有任意数量的自定义数据属性。

For example, consider a form validation script. The script needs to know what form of validation is required for each field. Currently, many of these scripts will use the class attribute to signal that.

例如，考虑一个表单验证脚本。 脚本需要知道每个字段需要哪种形式的验证。 当前，许多脚本将使用class属性来发出信号。

Making use of the new HTML5 custom data attributes, we might choose to store the information like this instead:

利用新HTML5自定义数据属性，我们可以选择存储如下信息：

To gain access to the value of the data-validation attribute, there are two options. First, you can simply use the getAttribute() method. This method should be familiar to anyone who’s worked with the DOM in Javascript and is supported by all major browsers. The second method is to make use of the new dataset DOM attribute. Currently, no major browsers support the dataset attribute, but to be fair, here’s how you would use it:

要访问data-validation属性的值，有两个选项。 首先，您可以简单地使用getAttribute()方法。 任何使用Java中的DOM的人都应该熟悉这种方法，并且所有主要浏览器都支持该方法。 第二种方法是利用新的数据集DOM属性。 当前，没有主要的浏览器支持数据集属性，但公平地说，这是使用方法：

1. var theInput = document.getElementById('myInput');

   var theInput = document.getElementById('myInput');

2. var validationType = theInput.dataset.validation;

   var validationType = theInput.dataset.validation;

我的想法 (What I Think)

Custom data attributes have been met with varied opinions…some think it’s fantastic while others either don’t get the value or simply don’t like the idea. Personally…I think it’s a good idea.

自定义数据属性已经引起了各种各样的意见……有些人认为这很棒，而另一些人却没有获得价值或只是不喜欢这个想法。 就个人而言……我认为这是一个好主意。

Currently there’s two popular ways of providing hooks for scripts in HTMl where no appropriate attribute exists:

当前，在不存在适当属性的情况下，有两种流行的方法可为HTMl中的脚本提供钩子：

1. Use an existing attribute even though it may not necessarily be semantically correct.

   使用现有属性，即使它不一定在语义上正确。

2. Create a new attribute and have the page no longer valid.

   创建一个新属性，使页面不再有效。

Where you stand personally along those lines, of course, varies. Some people don’t mind a page that doesn’t fully validate and would rather not clog up their id’s and classes. Others don’t mind adding an extra class to an element as long as the page is valid.

当然，按照这些原则您个人所处的位置会有所不同。 有些人不介意没有完全验证的页面，宁愿不阻塞其ID和类。 其他人不介意在页面有效的情况下向元素添加额外的类。

With the new data-* attributes, you can have the best of both worlds; your page can validate and you don’t have to add extra classes and id’s to make your scripts work. It’s also very easy to implement, and manages to keep all the data needed for scripting together in one dataset. What’s not to like?

使用新的data- *属性，您可以兼得两全。 您的页面可以验证，您不必添加其他类和ID即可使脚本正常工作。 它也很容易实现，并且可以将脚本编写所需的所有数据保存在一个数据集中。 不喜欢什么

You can actually start making use of custom data attributes right now. The page won’t validate for HTML4 of course, but once HTML5 rolls around you’ll be set. Just remember that to access the dataset values in Javascript you will need to use the getAttribute() and setAttribute() methods as the dataset DOM attribute is not currently supported.

您实际上可以立即开始使用自定义数据属性。 该页面当然不会针对HTML4进行验证，但是一旦HTML5出现，您就会被设置。 只需记住，要访问Javascript中的数据集值，您将需要使用getAttribute()和setAttribute()方法，因为当前不支持数据集DOM属性。

翻译自: https://timkadlec.com/2008/08/new-way-to-store-custom-data/

自定义数据存储