ローカルストレージをクリックしてキー値を2回設定する

Question

私はローカルストレージを使い慣れていないため、少し問題があります。私は、次のコードを持っている：私はここでやろうとしています何

$('#side-nav a').on('click', function() { 
     var component = $(this).attr('data-component'); 
     var componentPath = 'components/' + component + '/index.html'; 
     var uid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 
      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); 
      return v.toString(16); 
     }); 

     $.get(componentPath, function(data) { 
      // Add id to component 
      var html = data.replace('data-uid=""','data-uid="' + uid + '"'); 

      localStorage.setItem(uid, html); 
     }); 
    }); 

は次のとおりです。

1/#sidebar-nav aは、ローカルファイルからいくつかのHTMLを取得クリックされたとき、#data-uid属性に一意のIDを追加し

2/uidと操作された文字列をキーと値のペアとしてローカルストレージに保存します。

問題は、クリックごとに2つのインスタンスがローカルストレージに保存されることです。画像は#sidebar-nav aのシングルクリックを表します。

なぜこれが起こっている誰もが説明できますか？

UPDATE

私はこの問題を絞り込まれています。私は、次の取る場合：

var uid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 
    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); 
    return v.toString(16); 
}); 

をなど静的変数と交換してください：

var uid = 'abc123'; 

それが正常に動作し、私は期待どおり、ローカルストレージへの単一のエントリを追加します。私が知っているが、すぐに私は再びそれをクリックすると、ローカルストレージに二回のエントリを追加

var date = Date.now(); 
var uid = Math.round((Math.random() * date)/Math.random()); 

ほど良好ではない：私はそのようにのようなユニークなIDを生成するために、日付といくつかの数学を使用してみました！

Answer 1

イベントハンドラを誤って2回接続している可能性があります。

変更この：これに

$('#side-nav a').on('click', function() {

：$('#side-nav a').off().on('click', function() {

.off()

は、すべてのイベントハンドラは、新しいものを取り付ける前に削除されていることを確認します。伝播が発生している可能性もあります。追加：それは親だ上でクリックイベントがアップa要素から、おそらくない「バブル」はクリックをトリガーん確認します

$('#side-nav a').off().on('click', function(e) { 
    e.stopPropagation(); 

を。

他のすべてが失敗した場合は、JavaScriptをデバッグしてイベントが2回発生するタイミングを正確に伝えるために、開発ツール（ChromeのCtrl+shift+I）を使用します。