如何使用按钮删除本地网络存储中的对象[重复]

Posted 2023-03-05

【中文标题】如何使用按钮删除本地网络存储中的对象[重复]

【英文标题】：How to delete an object in local webstorage with a button [duplicate]

【发布时间】：2021-04-17 12:11:48

【问题描述】：

我有一个学校项目，我需要制作一个音乐网站，它几乎完成了，但是我在使用网络本地存储制作播放列表时遇到了问题。

'use strict'

const configs = 
  PLAYLIST_KEY: "playlist",
;

function addMusicToPlaylist(data) 
  let musics = new Array();

  if (localStorage.hasOwnProperty(configs.PLAYLIST_KEY)) 
    musics = JSON.parse(localStorage.getItem(configs.PLAYLIST_KEY));
  

  musics.push(data);

  localStorage.setItem(configs.PLAYLIST_KEY, JSON.stringify(musics));


$(".add-music-button").on("click", function () 
  let musicRef = $(this).data("ref");

  let musicObject = 
    author: $(`#$musicRef .music-author`).html(),
    title: $(`#$musicRef .music-title`).html(),
  ;

  addMusicToPlaylist(musicObject);
);

$(document).ready(function () 

  if ($("#playlist-table").length > 0) 
    if (localStorage.hasOwnProperty(configs.PLAYLIST_KEY))  // testa se o objecto tem a propriedade especificada

      JSON.parse(localStorage.getItem(configs.PLAYLIST_KEY)).map(
        (music, index) => 
          $("#playlist-table").append(`
          <tr id="music-$index">
            <td class="music-author">$music.author</td>
            <td class="music-title">$music.title</td>
          </tr>
          <tr><td><p class="textoFav"></p></td> musica<td><button class="favBotao" onclick="apagar()" ><i class="fa fa-remove"></i></button></td></tr>
        `);
        
      );
    
  
);

function apagar ()
    localStorage.removeItem('playlist')

我只能删除播放列表中的所有音乐，但我只想删除一首音乐，如下所示：

"按钮1：音乐1

按钮 2：音乐 2

按钮 3：音乐 3

按钮 4：音乐 4"

如果用户按下按钮 3，我希望它从播放列表中删除音乐 3。 我该怎么做？

【问题讨论】：

您应该setItem(musics) 其中musics 是没有您要删除的元素的数组 - 您必须更新本地存储项目内容，而不是完全删除它。

不要将其视为“本地存储中的音乐”；将其视为一组项目。如何从数组中删除一个项目？ slice。一旦你得到你想要的数组，序列化并存储在本地存储中。

【参考方案1】：

设置索引参数，即：onclick="apagar(index)"。

然后，创建apagar函数：

function apagar(index) 
   let musics = new Array();
   musics = JSON.parse(localStorage.getItem(configs.PLAYLIST_KEY));

   musics = musics.filter((_, i) => i !== index);

   localStorage.setItem(configs.PLAYLIST_KEY, JSON.stringify(musics));

【讨论】：

如果我在 "onclick = "apagar(index)" 中设置和索引参数给我并且错误提示："索引未定义

使用字符串插值：apagar($ index )