时间戳

首页 > 解决方案 > 如何删除特定索引或行中的数据本地存储

javascript - 如何删除特定索引或行中的数据本地存储

问题描述

在我的代码中，如果我运行，我在本地存储中的数据将全部删除。我如何删除我选择的 1 行我很困惑如何从本地存储中删除表数据中的行

我现在的问题是，当我单击行表中的按钮删除时，行选择被删除，但本地存储中的数据没有被删除，然后当我刷新页面时，数据再次显示。

function hapus(r){
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  localStorage.removeItem('dataProduk');
}

像这样的完整代码

<script type="text/javascript">
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
    $('#getProduks').change(function(e){
      let data = $('#getProduks').val();
      let datas = data.split('|');
      let idProduk = datas[0];
      let hargaProduk = datas[1];
      let stokProduk = datas[2];
      let namaProduk = datas[3];

      $('#hargaProduk').val('');
      $('#hargaProduk').val(hargaProduk);
    })

    let dataStore = localStorage.getItem('dataProduk') ? JSON.parse(localStorage.getItem('dataProduk')) : [];
    let subAllTotal = 0;

    for (var i = 0; i < dataStore.length; i++){

      let table = `
      <tr>
        <td width="10" align="center" scope="row"></td>
        <td><button type="submit" onclick="hapus(this)"><i class="fa fa-trash-o"></i></button></td>
        <td>&nbsp;${dataStore[i].namaProduk}</td>
        <td>&nbsp;${dataStore[i].hargaProduk}</td>
        <td>&nbsp;${dataStore[i].disProduk}</td>
        <td>&nbsp;${dataStore[i].jumProduk}</td>
        <td>&nbsp;${(dataStore[i].hargaProduk * dataStore[i].jumProduk) - (dataStore[i].hargaProduk * dataStore[i].jumProduk * dataStore[i].disProduk/100)}</td>          
      </tr>
      `

      $('tbody').append(table);        

      subAllTotal += (dataStore[i].hargaProduk * dataStore[i].jumProduk) - (dataStore[i].hargaProduk * dataStore[i].jumProduk * dataStore[i].disProduk/100)
    }

    $('#subAllTotal').html(jadiinRupiah(subAllTotal));


    $('#tambahProduk').click(function(){

        let namaP = $('#getProduks').val().split('|')[3];
        let hargaP = $('#hargaProduk').val();
        let disP = $('#getDis').val();
        let jumP = $('#getJum').val();

        let data = {
          namaProduk: namaP,
          hargaProduk: hargaP,
          disProduk: disP,
          jumProduk: jumP
        }

        dataStore.push(data)
        localStorage.setItem('dataProduk',JSON.stringify(dataStore))
        let subAllTotal = 0;

        let table = `
        <tr>
          <td width="10" align="center" scope="row"></td>
          <td><button type="submit" onclick="hapus(this)"><i class="fa fa-trash-o"></i></button></td>
          <td>&nbsp;${data.namaProduk}</td>
          <td>&nbsp;${data.hargaProduk}</td>
          <td>&nbsp;${data.disProduk}</td>
          <td>&nbsp;${data.jumProduk}</td>
          <td>&nbsp;${(data.hargaProduk * data.jumProduk) - (data.hargaProduk * data.jumProduk * data.disProduk/100)}</td>
        </tr>
        `
        $('tbody').append(table);

        for (var i = 0; i < dataStore.length; i++){
          //subAllTotal += (data.hargaProduk * data.jumProduk) - (data.hargaProduk * data.jumProduk * data.disProduk/100)
          subAllTotal += (dataStore[i].hargaProduk * dataStore[i].jumProduk) - (dataStore[i].hargaProduk * dataStore[i].jumProduk * dataStore[i].disProduk/100)
        }

        $('#subAllTotal').html(jadiinRupiah(subAllTotal));
    })

  });      

  $('#hapusProduk').click(function(){
    localStorage.clear();
  });

function hapus(r){
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  localStorage.removeItem('dataProduk');
}

function jadiinRupiah(total) {
  return new Intl.NumberFormat('en-US', {style: 'currency', currency: 'IDR'}).format(total).split('IDR')[1].trim()      
}

标签： javascript

解决方案

您需要获取当前数组，删除该行并再次保存。

function hapus(r){
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  let data = localStorage.getItem('dataProduk');
  data.splice(i,1); //remove data[i]
  localStorage.setItem('dataProduk', data);
}

我不确定是什么dataProduk样子 - 如果它是一个数组，上面的解决方案将起作用，但如果它是一个你必须使用的对象dataProduk.filter

推荐阅读