jQuery .data() vs data-* attributes and dataset

shop/convert.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Product cards</title>
  </head>
  <body>
    <ul id="cards">
      <li class="card" id="kettle" data-price="1499" data-sku="7310" data-stock="12" data-featured="true"
        data-badge="null" data-weight="1.5" data-barcode="8901234567890"
        data-options='{"colour":"steel","litres":1.5}' data-gallery='["front.jpg","side.jpg"]'>Kettle</li>
      <li class="card" id="lamp" data-price="1499.00" data-sku="0042" data-stock="012" data-featured="yes"
        data-badge="new" data-weight="1e3" data-barcode="12345678901234567890"
        data-options="{colour: 'teal'}" data-gallery="front.jpg">Lamp</li>
    </ul>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="convert.js"></script>
  </body>
</html>

shop/convert.js

// convert.js: what .data() returns for the data-* attributes of two product cards that use the same keys, next to
// the text of each attribute, and what dataset returns for the same attributes.
const q = (value) => JSON.stringify(value);
const what = (value) => {
  if (value === null) return 'null';
  if (Array.isArray(value)) return `${q(value)} (an array)`;
  if (typeof value === 'object') return `${q(value)} (an object)`;
  if (typeof value === 'string') return `${q(value)} (a string)`;
  return `${value} (a ${typeof value})`;
};
const kettle = $('#kettle');
const lamp = $('#lamp');

console.log('key: kettle | lamp, as "the attribute\'s text" gives what .data() returned');
for (const key of ['price', 'sku', 'stock', 'featured', 'badge', 'weight', 'barcode', 'options', 'gallery']) {
  const one = `${q(kettle.attr(`data-${key}`))} gives ${what(kettle.data(key))}`;
  const two = `${q(lamp.attr(`data-${key}`))} gives ${what(lamp.data(key))}`;
  console.log(`${key}: ${one} | ${two}`);
}

// The shop's old code formats every price the same way.
for (const card of [kettle, lamp]) {
  try {
    console.log(`${card[0].id}: $card.data('price').toFixed(2) is ${card.data('price').toFixed(2)}`);
  } catch (error) {
    console.log(`${card[0].id}: ${error.name}: ${error.message}`);
  }
}

// dataset holds the same attributes as text, always.
const k = document.getElementById('kettle').dataset;
const l = document.getElementById('lamp').dataset;
console.log(`dataset.price: ${q(k.price)} | ${q(l.price)}; dataset.stock: ${q(k.stock)} | ${q(l.stock)}; dataset.featured: ${q(k.featured)} | ${q(l.featured)}`);
console.log(`typeof every dataset value: ${[...new Set([...Object.values(k), ...Object.values(l)].map((v) => typeof v))].join(', ')}`);

shop/names.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Delivery options</title>
  </head>
  <body>
    <form id="delivery" data-delivery-slot="evening" data-gift-wrap="true" data-pinCode="411001">
      <label><input type="radio" name="slot" value="morning"> Morning</label>
      <label><input type="radio" name="slot" value="evening" checked> Evening</label>
    </form>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="names.js"></script>
  </body>
</html>

shop/names.js

// names.js: how the names of data-* attributes become .data() keys and dataset properties, and back again.
const q = (value) => JSON.stringify(value);
const form = document.getElementById('delivery');
const $form = $(form);

console.log(`attribute names in the page: ${[...form.attributes].map((a) => a.name).filter((n) => n.startsWith('data-')).join(', ')}`);
console.log(`.data('deliverySlot') ${q($form.data('deliverySlot'))}, .data('delivery-slot') ${q($form.data('delivery-slot'))}, dataset.deliverySlot ${q(form.dataset.deliverySlot)}`);
console.log(`.data('pinCode') ${q($form.data('pinCode'))}, .data('pincode') ${q($form.data('pincode'))}, dataset.pincode ${q(form.dataset.pincode)}`);
console.log(`keys of .data(): ${Object.keys($form.data()).sort().join(', ')}; keys of dataset: ${Object.keys(form.dataset).join(', ')}`);

// Writing through dataset turns each capital letter into a hyphen and the lower-case letter.
form.dataset.giftNote = 'Happy Diwali';
console.log(`after dataset.giftNote = 'Happy Diwali': attribute data-gift-note ${q(form.getAttribute('data-gift-note'))}, .data('giftNote') ${q($form.data('giftNote'))}`);
try {
  form.dataset['gift-note'] = 'Happy birthday';
} catch (error) {
  console.log(`dataset['gift-note'] = …: ${error.name}`);
}

shop/stale.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cart</title>
    <style>
      .badge[data-count="0"] { display: none; }
    </style>
  </head>
  <body>
    <a href="/cart/">Cart <span id="cart" class="badge" data-count="2">2</span></a>
    <a href="/saved/">Saved <span id="saved" class="badge" data-count="5">5</span></a>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="stale.js"></script>
  </body>
</html>

shop/stale.js

// stale.js: .data() copies an attribute into jQuery's store the first time it reads it; from then on the attribute and
// the store change separately, and CSS and dataset see only the attribute.
const q = (value) => JSON.stringify(value);
const cart = document.getElementById('cart');
const $cart = $(cart);

console.log(`first read: .data('count') ${q($cart.data('count'))}`);

// Another script, or HTML sent again by the server, changes the attribute.
cart.setAttribute('data-count', '3');
console.log(`after setAttribute('data-count', '3'): .data('count') ${q($cart.data('count'))}, .attr('data-count') ${q($cart.attr('data-count'))}, dataset.count ${q(cart.dataset.count)}`);

// The old code empties the cart through .data(): the store changes, the attribute does not.
$cart.data('count', 0).text('0');
console.log(`after .data('count', 0): the attribute says ${q(cart.getAttribute('data-count'))}; matches .badge[data-count="0"]: ${cart.matches('.badge[data-count="0"]')}`);

// Fix 1: keep the value in one place, the attribute, which CSS and every other script read too.
$cart.attr('data-count', 0);
console.log(`after .attr('data-count', 0): matches .badge[data-count="0"]: ${cart.matches('.badge[data-count="0"]')}; Number(dataset.count) ${Number(cart.dataset.count)}`);

// Fix 2, while old code still reads .data(): drop the stored copy, and the next read takes the attribute again.
cart.setAttribute('data-count', '7');
console.log(`after setAttribute('data-count', '7'): .data('count') ${q($cart.data('count'))}`);
$cart.removeData('count');
console.log(`after .removeData('count'): .data('count') ${q($cart.data('count'))}`);

// The low-level jQuery.data() reads only the store, never the attribute.
const saved = document.getElementById('saved');
console.log(`$.data(saved, 'count') before any .data(): ${q($.data(saved, 'count'))}; $(saved).data('count') ${q($(saved).data('count'))}; $.data(saved, 'count') now ${q($.data(saved, 'count'))}`);

// Where the store lives: in a property of the element object itself.
const own = (el) => Object.keys(el).filter((key) => key.startsWith('jQuery')).length;
console.log(`own properties of the cart element whose name starts with jQuery: ${own(cart)}`);
saved.remove();
console.log(`after saved.remove(), the DOM's own remove(): $.hasData(saved) ${$.hasData(saved)}`);
$cart.remove();
console.log(`after $cart.remove(), jQuery's remove(): $.hasData(cart) ${$.hasData(cart)}`);

shop/proto.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Filters</title>
  </head>
  <body>
    <form id="filters" data-colour="red" data-size="m">
      <label><input type="checkbox" name="colour" value="red" checked> Red</label>
      <label><input type="checkbox" name="size" value="m" checked> Medium</label>
    </form>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="proto.js"></script>
  </body>
</html>

shop/proto.js

// proto.js: the object .data() returns, and the old way of asking it whether a key is there.
const data = $('#filters').data();

console.log(`keys: ${Object.keys(data).sort().join(', ')}; JSON.stringify(data): ${JSON.stringify(data, Object.keys(data).sort())}`);
console.log(`Object.getPrototypeOf(data) === null: ${Object.getPrototypeOf(data) === null}; typeof data.hasOwnProperty: ${typeof data.hasOwnProperty}`);
try {
  console.log(`data.hasOwnProperty('colour'): ${data.hasOwnProperty('colour')}`);
} catch (error) {
  console.log(`data.hasOwnProperty('colour'): ${error.name}: ${error.message}`);
}
console.log(`'colour' in data: ${'colour' in data}; Object.hasOwn(data, 'colour'): ${Object.hasOwn(data, 'colour')}`);

// Why the prototype went: a key nobody stored must not find a method of Object.prototype.
console.log(`typeof $('#filters').data('toString'), a key nobody stored: ${typeof $('#filters').data('toString')}`);

shop/native.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Product cards</title>
  </head>
  <body>
    <ul id="cards">
      <li class="card" id="kettle" data-price="1499" data-sku="7310" data-stock="12" data-featured="true"
        data-badge="null" data-weight="1.5" data-barcode="8901234567890"
        data-options='{"colour":"steel","litres":1.5}' data-gallery='["front.jpg","side.jpg"]'>Kettle</li>
      <li class="card" id="lamp" data-price="1499.00" data-sku="0042" data-stock="012" data-featured="yes"
        data-badge="new" data-weight="1e3" data-barcode="12345678901234567890"
        data-options="{colour: 'teal'}" data-gallery="front.jpg">Lamp</li>
    </ul>
    <script src="native.js"></script>
  </body>
</html>

shop/native.js

// native.js: the two cards of convert.html without jQuery. dataset gives text, and each key is parsed on purpose, so
// its type never depends on how its text happens to be written.
const q = (value) => JSON.stringify(value);

/** A decimal number, or null when the text is not one (no attribute, an empty one, "1,499", "abc"). */
function toNumber(text) {
  if (text === undefined || text.trim() === '') return null;
  const n = Number(text);
  return Number.isFinite(n) ? n : null;
}

/** The parsed JSON, or the fallback when the text is not valid JSON. */
function toJson(text, fallback) {
  try {
    return JSON.parse(text);
  } catch {
    return fallback;
  }
}

function readCard(el) {
  const d = el.dataset;
  return {
    price: toNumber(d.price), // a number for sums: "1499" and "1499.00" both give 1499
    sku: d.sku, // an identifier: the text as written, leading zeros and all
    stock: toNumber(d.stock), // "012" gives 12
    featured: d.featured === 'true', // only the word true means yes
    options: toJson(d.options, {}), // text that is not JSON gives no options, on purpose
    barcode: d.barcode, // digits, but an identifier: 20 digits do not fit in a number
  };
}

for (const id of ['kettle', 'lamp']) {
  const card = readCard(document.getElementById(id));
  console.log(`${id}: ${q(card)}; price.toFixed(2) ${card.price.toFixed(2)}`);
}
// Why toNumber() checks for blank text first: Number() reads an empty or blank text as 0.
console.log(`Number(''): ${Number('')}, Number('   '): ${Number('   ')}, toNumber(''): ${toNumber('')}, toNumber('1,499'): ${toNumber('1,499')}`);

// Writing through dataset writes the attribute, so CSS and every other script see the change.
const kettle = document.getElementById('kettle');
kettle.dataset.stock = 11;
console.log(`after dataset.stock = 11: attribute ${q(kettle.getAttribute('data-stock'))}, matches [data-stock="11"]: ${kettle.matches('[data-stock="11"]')}`);
delete kettle.dataset.badge;
console.log(`after delete dataset.badge: data-badge is still there: ${kettle.hasAttribute('data-badge')}`);

// A value that is not text (a timer, an object) stays out of the HTML: a WeakMap keyed by the element holds it.
const carousels = new WeakMap();
carousels.set(kettle, { slide: 0 });
carousels.get(kettle).slide += 1;
console.log(`carousels.get(kettle) ${q(carousels.get(kettle))}; carousels.has(lamp) ${carousels.has(document.getElementById('lamp'))}`);