キー値ペアのランダム変数が変数として解釈されない

Question

私はkey:valueペアを使用してローカルストレージに保存しようとしているいくつかの値を持っています。私は、これはフィドル

https://jsfiddle.net/ps4xs60x/27/

とコード

$(document).ready(function() { 
$(document).on('click', '.btn-primary', function(){ 
var num = Math.random(); 
     $('.table tbody').append('<tr class="child"><td>one</td><td><button id="'+num+'" onClick="ae(this.id); function ae(clicked_id) {var items = []; var entry = {\'num\': clicked_id}; items.push(entry);localStorage.setItem(\'entry\',JSON.stringify(items));alert(localStorage.getItem(\'entry\',JSON.stringify(items)));}" type="button" class="invite ">Invite</button></td></tr>'); 
     }); 
}); 

どのようにできているkeyがMath.random()からランダムな値にしたいが、私の値を変数

として見られていません私はnumを変数とみなしていますか？

Answer 1

免責事項：

そうのlocalStorageは、これらのスニペットにはあまり動作しますが、以下のコードまたはthis forked fiddleは表示されません。

コードは

が onClick属性のうち、機能 ae()を移動し、通常のJS関数として定義
1. 変更します。
2. とすると、それぞれの数字がlocalStorage要素entry配列にクリックされたの配列を追加すると、新しい配列を作成する代わりにjson（設定されている場合）として解析する必要があります。
3. 代わりのonclick属性を使用して、あなたはクラス名btn-primaryを持つ要素のためにやっているのと同じように、クラス名inviteを持つ要素のクリックハンドラを追加...

function ae(event) { 
 
    var items = JSON.parse(localStorage.getItem('entry')); 
 
    if (items == null || typeof items !== 'object') { 
 
     items = []; 
 
    } 
 
    var entry = { 
 
    'num': event.target.id 
 
    }; 
 
    items.push(entry); 
 
    localStorage.setItem('entry', JSON.stringify(items)); 
 
    alert(localStorage.getItem('entry')); 
 
} 
 
$(document).ready(function() { 
 
    $(document).on('click', '.invite', ae); 
 
    $(document).on('click', '.btn-primary', function() { 
 
    var num = Math.random(); 
 
    $('.table tbody').append('<tr class="child"><td>one</td><td><button id="' + num + '"type="button" class="invite ">Invite</button></td></tr>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <tbody></tbody> 
 
</table> 
 

 
<button class="btn-primary">Add Row 
 
</button>