Data attribute handling for storing and retrieving custom element data with automatic type conversion and jQuery-compatible data storage.
Get, set, and manage data-* attributes with automatic parsing and type conversion.
/**
* Get all data-* attributes as an object
* @returns Object with all data attributes or undefined
*/
data(): Record<string, any> | undefined;
/**
* Get a specific data attribute value
* @param name - Data attribute name (without 'data-' prefix)
* @returns Data attribute value with type conversion
*/
data(name: string): any;
/**
* Set a data attribute value
* @param name - Data attribute name (without 'data-' prefix)
* @param value - Value to set (will be JSON stringified if needed)
* @returns The Cash collection for chaining
*/
data(name: string, value: any): this;
/**
* Set multiple data attributes
* @param datas - Object mapping attribute names to values
* @returns The Cash collection for chaining
*/
data(datas: Record<string, any>): this;Usage Examples:
// Get all data attributes
const allData = $('.element').data(); // { userId: 123, theme: 'dark' }
// Get specific data attribute
const userId = $('.element').data('user-id'); // or data('userId')
const config = $('.widget').data('config');
// Set single data attribute
$('.element').data('user-id', 456);
$('.element').data('timestamp', Date.now());
// Set multiple data attributes
$('.element').data({
'user-id': 123,
'user-name': 'john',
'settings': { theme: 'dark', lang: 'en' }
});
// Data with automatic type conversion
$('.element').data('count', 42); // Number
$('.element').data('active', true); // Boolean
$('.element').data('items', [1,2,3]); // Array
$('.element').data('config', {a: 1}); // Object
// Reading with type preservation
const count = $('.element').data('count'); // 42 (number)
const active = $('.element').data('active'); // true (boolean)
const items = $('.element').data('items'); // [1,2,3] (array)
// Component configuration
$('.carousel').data({
'auto-play': true,
'slide-duration': 3000,
'controls': ['prev', 'next', 'dots']
});
// Event handling with data
$('.button').data('action', 'save').on('click', function() {
const action = $(this).data('action');
performAction(action);
});Cash DOM automatically converts data attribute values to appropriate JavaScript types:
// HTML: <div data-count="42" data-active="true" data-items='[1,2,3]'>
const element = $('.element');
element.data('count'); // 42 (number, not string)
element.data('active'); // true (boolean, not string)
element.data('items'); // [1,2,3] (array, not string)Kebab-case data attributes are automatically converted to camelCase when accessed:
// HTML: <div data-user-name="John" data-max-items="10">
$('.element').data('userName'); // "John" (camelCase access)
$('.element').data('user-name'); // "John" (kebab-case access also works)
$('.element').data('maxItems'); // 10Data can be stored in memory (faster) or as HTML attributes (persistent):
// Setting via data() stores in memory and updates HTML attribute
$('.element').data('key', 'value');
// Direct attribute setting only affects HTML
$('.element').attr('data-key', 'value');
// data() getter checks memory first, then HTML attributes
const value = $('.element').data('key');// Configuration storage
$('.plugin-element').data('config', {
api: '/api/endpoint',
timeout: 5000,
retries: 3
});
// State management
$('.toggle').on('click', function() {
const current = $(this).data('state') || 'off';
const newState = current === 'off' ? 'on' : 'off';
$(this).data('state', newState).toggleClass('active', newState === 'on');
});
// Component initialization
$('.widget').each(function() {
const options = $(this).data();
new Widget(this, options);
});
// Form field metadata
$('.form-field').data({
'validation-rules': ['required', 'email'],
'error-message': 'Please enter a valid email',
'success-callback': 'showSuccessMessage'
});