从 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

你的代码中有一个额外的错误，你写

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);
        }
    }
}

应该是什么时候

if (value !== null) {
    if (value.id == typefaceID) {
        // here the comparison should be between value.name and name
        if (value.name == name) {
            typefaces.splice(index, 1);
        }
    }
}

也可以写

if (value !== null) {
    if (value.id == typefaceID && value.name == name) {
            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 值，但您试图将其与 字符串（'null'，引号）进行比较。失败。我将localData == 'null' 更改为localData == null。

表达式的第二部分尝试查看从getItem 返回的值实际上是定义的，这很好。我通过typeof 将其更改为更明确。

显式变量声明也有帮助。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<summary class='cart'><table><tr>
<td class='font' >Click Here for Item 1
<input data-name='abc' data-price='2.00' value="Item 1" /></td></tr>
<tr>
<td class='font' >Click Here for Item 2
<input data-name='def' data-price='4.00' value="Item 2" /></td></tr></table>
</summary>