单击本地存储设置键值两次

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和操纵的字符串保存为本地存储的键/值对。

我遇到的问题是每次点击都会将两个实例保存到本地存储。该图片代表#sidebar-nav a：

的单击

任何人都可以解释为什么会这样吗？

更新

我已经缩小了问题范围。如果我拿出以下内容：

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';

它工作正常，只能按照我的预期在本地存储中添加一个条目。然后我尝试使用日期和一些数学生成一个唯一的ID，如下所示：

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

不太好我知道但是一旦我点击它再次将条目添加到本地存储中两次！

Answer 1

您可能偶然连接了两次事件处理程序。

改变这个：

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

对此：

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

.off()将确保在附加新事件之前删除所有事件处理程序。您可能也正在经历传播。添加：

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

确保点击事件不会从a元素“冒泡”，并可能触发点击它的父级。

如果所有其他方法都失败，请使用开发人员工具（Chrome中为Ctrl+shift+I）来调试JavaScript，并告诉我该事件何时被触发两次。