从localStorage中删除特定项目

Question

我正在使用jQuery / JS向localStorage添加一些项目，这很好但是在尝试删除数组中的特定项目时（如果它是相同的项目）证明是困难的。

在我的控制台日志中（用于测试）它似乎清除了[Object]但它没有更新密钥。也许我的等级制度错了......任何想法？

//
function addToStorage(elem, name) {

    localData = localStorage.getItem(name + 'Storage');
    var typefaces;

    if (localData == 'null' || !localData) {
        typefaces = [];
    } else {
       typefaces = JSON.parse(localData);
    }

    typefaceID = elem.find('input').val();
    typefaceName = elem.find('input').attr('data-name');
    typefacePrice = elem.find('input').attr('data-price');
    typefaceQty = 1;

    $.each(typefaces, function(index, value) {
        if (value !== null) {
            if (value.id == typefaceID) {
                if (name == 'drf') {
                    //console.log(index);
                    //console.log(typefaces);
                    typefaces.splice(index, 1);
                    //console.log(typefaces);
                }
            }
        }
    });

    typefaces.push({
        'id': typefaceID,
        'name': typefaceName,
        'price': typefacePrice,
        'qty': typefaceQty
    });

    localStorage.setItem(name + 'Storage', JSON.stringify(typefaces));

}

//
$(document).on('click', 'summary.cart td.font', function(e) {
    e.preventDefault();
    addTo = $(this);
    addTo.each(function() {
        addToStorage(addTo, 'drf');
    });
});

这是localData被添加到的一个例子。

[  
   {  
      "id":"dr-raymond-desktop-40374",
      "name":"DR-Raymond",
      "format":"Desktop (OTF)",
      "price":"15.00",
      "qty":1
   },
   {  
      "id":"dr-raymond-webfont-39949",
      "name":"DR-Raymond",
      "format":"Webfont (WOFF)",
      "price":"15.00",
      "qty":1
   }
]

Answer 1

使用“foreach”迭代时，不要在数组中添加/删除元素。相反，试试这个：

for (index = typefaces.length - 1; index >= 0; index--){
    value = typefaces[index];
    if (value !== null) {
        if (value.id == typefaceID) {
            if (name == 'drf') {
                typefaces.splice(index, 1);
            }
        }
    }
});

另一种更优雅的方法是使用ES6 filter（）：

typefaces = typefaces.filter(value => !(value && value.id == typefaceID && name == "drf"));

此外，您正在将localData与文字字符串'null'进行比较，这是毫无意义的。在这种情况下，你的第二个条件 - if (!localData)就足够了，并且会妥善处理它。

Answer 2

问题在于你的拼接方法用法。请注意，根据MDN splice修改数组并返回一个包含已删除元素的新数组。因此，当使用循环并尝试删除某些元素时，拼接将使元素移位。这是因为通过数组递增迭代，当你拼接它时，数组被修改到位，所以项目被“移位”，你最终跳过了一些迭代。向后循环可以解决这个问题，因为你没有在你拼接的方向上循环。

解决方案1 ​​

拼接时向后循环。

for(var i = typefaces.length; i--;)
{
            if (typefaces[i] !== null) 
            {

                if (typefaces[i] == typefaceID) 
                {
                        typefaces.splice(i, 1);
                }
            }
 }

工作箱链接here。

解决方案2

生成新数组通常更快，而不是修改现有数组。所以，你的代码看起来像

ty = [];
   $.each(typefaces, function(index, value) {
        if (value !== null) {

            if (value.id != typefaceID) {
                    ty.push(value);
            }
        }
    });
  typefaces = ty;

工作箱链接为here。 在此之后，获取和设置localStorage没有问题。

Answer 3

您的代码中还有其他错误，您可以写

exit!

什么时候应该

exit

也可以写

if (value !== null) {
    if (value.id == typefaceID) {
        // name will always have the value drf 
        // since you pass it in your function
        // when you call it addToStorage(addTo, 'drf');
        if (name == 'drf') {
            typefaces.splice(index, 1);
        }
    }
}

Answer 4

您正在通过拼接来改变阵列。正在重写的唯一本地存储项是保留在数组中的那些。

因此，当您从阵列中拼接对象时，请从存储中删除该项目。

$.each(typefaces, function(index, value) {
        if (value !== null) {
            if (value.id == typefaceID) {
                if (name == 'drf') {
                    //console.log(index);
                    //console.log(typefaces);
                    var removedTypeFace = typefaces.splice(index, 1);
                    //console.log(typefaces);

                    if(removedTypeFace) {
                        localStorage.removeItem(removedTypeFace.name + 'Storage');
                    }
                }
            }
        }
    });

Answer 5

行。你会自己踢。第一次从localStorage中提取时，getItem方法会返回null值，但您尝试将其与字符串进行比较（{{1}在引号中）。失败。我将'null'更改为localData == 'null'。

表达式的第二部分试图看到localData == null返回的值实际定义，这很好。我通过getItem改变了这一点。{/ 1}。

显式变量声明也有帮助。

＆＃13;

＆＃13;

typeof

＆＃13;

function addToStorage(elem, name) {

    var localData = localStorage.getItem(name + 'Storage');
    var typefaces;

    if (localData == null || typeof(localData) == 'undefined') {
        typefaces = [];
    } else {
       typefaces = JSON.parse(localData);
    }

    var typefaceID = elem.find('input').val();
    var typefaceName = elem.find('input').attr('data-name');
    var typefacePrice = elem.find('input').attr('data-price');
    var typefaceQty = 1;

    $.each(typefaces, function(index, value) {
        if (value !== null) {
            if (value.id == typefaceID) {
                if (name == 'drf') {
                    //console.log(index);
                    //console.log(typefaces);
                    typefaces.splice(index, 1);
                    //console.log(typefaces);
                }
            }
        }
    });

    typefaces.push({
        'id': typefaceID,
        'name': typefaceName,
        'price': typefacePrice,
        'qty': typefaceQty
    });

    localStorage.setItem(name + 'Storage', JSON.stringify(typefaces));

}

//
jQuery(document).on('click', 'summary.cart td.font', function(e) {
    e.preventDefault();
    addTo = $(this);
    addTo.each(function() {
        addToStorage(addTo, 'drf');
    });
});

＆＃13;

＆＃13;

＆＃13;