如何解决JavaScript中出现“push is not a function”的报错问题

错误原因 #

localStorage 中存储的所有值都是字符串格式，你直接通过 localStorage.getItem("deletedExpenses") 拿到的是JSON序列化后的字符串，而非数组对象，字符串本身没有 push 方法，因此调用时会抛出类型错误。

另外你在页面加载完成时已经把本地存储的删除记录解析成数组存在了deletedExpenses常量中，点击删除的逻辑里完全没必要重复从本地存储读取数据，直接操作这个已有的数组即可。

修复后代码 #

// 删除按钮功能
$(document).ready(function() {
   // jQuery加载完成后直接从本地存储读取已删除记录，没有数据就初始化为空数组
   const deletedExpenses = JSON.parse(localStorage.getItem('deletedExpenses')) || [];

   $('body').on('click', '.deleteButton', function(e) {
     e.preventDefault(); // 阻止链接默认跳转行为
     let deleteID = $(this).data('id');
     // 移除对应表格行
     $(this).closest('tr').remove();

     // 直接向已初始化的数组中追加新的删除ID
     deletedExpenses.push(deleteID);
     // 序列化后存回本地存储
     localStorage.setItem('deletedExpenses', JSON.stringify(deletedExpenses));
   })
})

如果确实有需要每次点击都从本地存储读取最新数据的场景（比如多页面可能同时操作该存储项），也可以按下面的写法修正读取逻辑：

// 读取后先做JSON解析，空值则初始化为空数组
var deletedArr = JSON.parse(localStorage.getItem("deletedExpenses")) || [];
deletedArr.push(deleteID);
localStorage.setItem('deletedExpenses', JSON.stringify(deletedArr));

内容的提问来源于stack exchange，提问作者Kiva Gordon