HTML5 way to store/retrieve object's data

Question

what's the HTML5 replacement (pure HTML no jQuery) for the following?

$("#blah#").data("key", value);
var value = $("#blah#").data("key");

Answer 1

Use localStorage to achieve your criteria.

Example:

localStorage.setItem('XYZ', value);

// Retrieve the object from storage
var value = localStorage.getItem('XYZ');

Answer 2

You can use either localstorage or sessionstorage depending on the lifetime you want to give to the datas.

Data placed in Local Storage is per domain (it's available to all scripts from the domain that originally stored the data) and persists after the browser is closed.

Session Storage is per-page-per-window and is limited to the lifetime of the window. Session Storage is intended to allow separate instances of the same web application to run in different windows without interfering with each other.

Session Storage :

<!-- Store value on browser for duration of the session -->
sessionStorage.setItem('key', 'value');

<!-- Retrieve value (gets deleted when browser is closed and re-opened) -->
alert(sessionStorage.getItem('key'));

Local Storage :

<!-- Store value on the browser beyond the duration of the session -->
localStorage.setItem('key', 'value');

<!-- Retrieve value (works even after closing and re-opening the browser) -->
alert(localStorage.getItem('key'));

Mind the minimum version for that :

http://caniuse.com/namevalue-storage

Answer 3

document.getElementById('foo').setAttribute('data-key', 'value');
var value = document.getElementById('foo').getAttribute('data-key');