html - HTML5 存储/检索对象数据的方法

Question

以下内容的 HTML5 替换（纯 HTML 没有 jQuery）是什么？

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

Answer 1

用于localStorage达到您的标准。

例子：

localStorage.setItem('XYZ', value);

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

Answer 2

您可以使用其中一个localstorage，也可以sessionstorage根据要赋予数据的生命周期来使用。

放入的数据Local Storage是每个域的（它对最初存储数据的域中的所有脚本都可用），并且在浏览器关闭后仍然存在。

Session Storage是 per-page-per-window 并且受限于窗口的生命周期。Session Storage旨在允许同一 Web 应用程序的不同实例在不同窗口中运行而不会相互干扰。

会话存储：

<!-- 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'));

本地存储：

<!-- 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'));

请注意最低版本：

http://caniuse.com/namevalue-storage

Answer 3

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