dataStore allows to store data with the matched node elements or return the value at the named data store for the first element in the set of matched elements. It is a equivalent of jQuery.data
in vanillaJS, so no need to import jQuery to use this feature :)
Data use expando property to prevent from memory leaks. Data are not store in node element, just a reference to them.
Call dataStore module in your HTML before your application and use it.
<script src="dataStore.js"></script>
Calling .add(selector, key, value)
method allow to attach data of any type to DOM elements in a way that is safe from memory leaks.
selector
must be a unique node element, not a collection of node (querySelector, not querySelectorAll).
If key already exist, the new key/value will replace the data.
dataStore.add(selector, key, value)
Calling .get(selector, key)
method return the value at the named data store for the first element in the node collection.
dataStore.get(selector, key)
Calling .get(selector)
method without key, retrieves all of the values as a JavaScript object.
dataStore.get(selector)
Calling .remove(selector, key)
method allows to remove values that were previously set using add()
.
When called with the name of a key, .remove()
deletes that particular value.
dataStore.remove(selector, key)
When called with selector argument only (without key), all values are removed.
dataStore.remove(selector)