明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

data属性で JSON データを管理する

Javascript では JSON データを簡単に扱うことができます。
今回の記事では、ページ内の一時的な情報を JSON オブジェクトとしてキャッシュし、それを HTML5 の data 属性で管理してみます。

実装条件

ソフトウェア バージョン
jQuery 2.2.4
Browser Chrome

コード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> JSON データを data属性で管理する</title>
  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="json_obj" data-json_data='{"counter": "2"}'>JSON コンテナ</div>
<div id="button">カウントアップ!</div>
<script>
  $(function() {
      $('#button').on('click', function() {
          json_data = $('#json_obj').data('json_data');
          json_data.counter++;
          $('#json_obj').attr('data-json_data', JSON.stringify(json_data));
      });
  });

</script>
</body>
</html>

上記のコードでは、id「json_obj」の要素に data「json_data」属性を用意し、JSON オブジェクトを格納しています。
id「button」要素をクリックすると、data「json_data」属性に格納された JSON オブジェクトを取り出します。data属性に含まれた JSON データは、取り出すだけでオブジェクトとして展開されます。
そして counter プロパティをインクリメントして、attr()メソッドを使用して更新します。
このとき、JSON.stringify() メソッドを使って文字列に置換しておくと、再度 JSON データとして格納されます(ただし JSON.stringify() メソッドを使わなくても再度取りだし更新することはできます)。
また、jQuery のキャッシュとして更新できれば良い場合は、data() メソッドでセットしたほうが楽ではあります。

<script>
...
$('#json_obj').data('json_data', json_data);
...
</script>

html5 の data属性は更新されませんが、これでも管理できます。

サンプルコードでは JSON オブジェクトにはプロパティが1つしか含まれていませんので、そのような場合は data-counter 属性を設定して管理するほうがスマートではあります。
正規化されていないデータを jQuery で扱うような場合に、真価を発揮します。