在html屬性中存儲非文字js對象

我正在構建一個大js庫，我需要在html屬性中存儲非文字js對象的實例。因爲我不能在這裏寫全js文件，這是一個類似的代碼：在html屬性中存儲非文字js對象

<div id="abc"></div> 
<script> 
    function abc(){this.foo = Math.random(); ... } //The js object 
    document.getElementById("abc").setAttribute("data-abc",new abc()); //Store the instance 
    console.log(document.getElementById("abc").getAttribute("data-abc").foo); //Somehow I get undefined 
</script>

我成功通過JQuery.data功能來做到這一點，但我here..How可以存儲實例我不能使用jQuery的？謝謝。

來源

2014-07-06 danchohen

學習基礎知識：HTML數據屬性可以存儲字符串，而'String.prototype'沒有'foo'屬性，因此你得到了一個未定義 –

東西值得一提的是jQuery的數據功能，實際上並不將東西存儲在DOM中。 –

屬性只能存儲字符串的，所以你可以通過使用JSON.stringify實現這一目標，並JSON.parse

function abc(){this.foo = Math.random();} 
document.getElementById("abc").setAttribute("data-abc",JSON.stringify(new abc())); 
console.log(JSON.parse(document.getElementById("abc").getAttribute("data-abc")).foo);

但是你也可以只做到這一點（除非你真的需要能夠一切轉換回HTML）

document.getElementById("abc").abc = new abc(); 
console.log(document.getElementById("abc").abc.foo);

來源

2014-07-06 12:03:40

在html屬性中存儲非文字js對象

回答

相關問題