8
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

html5のdata属性にjsを使ってオブジェクトを代入する

Last updated at Posted at 2016-02-08

##ソース

var obj = {hoge: 'fuga'}
var $div = $('<div/>').attr('data-obj', JSON.stringify(obj));
$('body').append($div);

result

<body>
<div data-obj='{"hoge": "fuga"}'></div>
</body>

##代入した情報を再度取得したい場合は・・・

var getObj =  JSON.parse( $('div').attr('data-obj') );
console.log(getObj);

##補足##

  • 同様のやり方で配列も代入可能です
  • data属性にオブジェクトや配列を代入する際は、json形式でなければいけない為、JSON.stringify()を使ってjson型に変更する
  • 上記を行わないとstringとして扱われ[object, object]となってしまう
  • 取得をする際も同様で、JSON.parse()を使ってオブジェクト型にパースすること
  • 情報が簡単に見えるようになってしまう為、セキュリティ的に問題のある情報は別の方法を使って管理しましょう
8
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?