從localStorage中刪除項目

Question

我試圖從localStorage中刪除項目。當用戶點擊刪除按鈕時，我需要檢查localStorage中包含的內容，並根據刪除的行刪除該值。

例如，說的localStorage包含以下逗號分隔的列表：

contact,user,account 

如果被刪除的行是在account行，然後我需要從列表中刪除帳戶值，使得localStorage的會現在包含：

contact,user 

或者，如果被刪除的行是user行，然後我需要從列表中刪除用戶價值，使他的localStorage將現在包含：

contact,account 

這裏是我的jQuery代碼：

<script type="text/javascript"> 
    var j$ = jQuery.noConflict(); 

    j$(document).ready(function() { 
     var dataRows = j$('tr.dataRow'); 
     localStorage.activeButtons = '';   
     var active = localStorage.activeButtons.split(',');   
     dataRows.each(function(index, elem) { 
      updateImages(elem, active[index]); 
     }); 

     j$("img[id$=':deleteImage']").on("click", function(event) { 
      updateImages(j$(this).closest('tr')); 
     }); 

     j$('[id$=btnContact]').on('click', function() { 
      localStorage.activeButtons += 'contact,'; 
     }); 

     j$('[id$=btnUser]').on('click', function() { 
      localStorage.activeButtons += 'user,'; 
     }); 

     j$('[id$=btnAccount]').on('click', function() { 
      localStorage.activeButtons += 'account,'; 
     }); 

     A4J.AJAX.AddListener({ 
      onafterajax: function(req,evt,data) { 

       console.log('************* activeButtons = ' + localStorage.activeButtons); 
       j$('[id$=deleteImage]').on('click', function(elem) { 
        console.log('the delete button was clicked'); 
        console.log(elem); 
        console.log('************** before ' + localStorage.activeButtons); 
        localStorage.activeButtons = localStorage.activeButtons; 
        console.log('************** after ' + localStorage.activeButtons); 
       }); 
       console.log('************* activeButtons = ' + localStorage.activeButtons); 

       var lastRow = j$('table[id$=participantTable] tbody tr:last');     
       var active = localStorage.activeButtons.split(','); 

       var dataRows = j$('tr.dataRow'); 
       dataRows.each(function(index, elem) { 
        updateImages(elem, active[index]); 
       }); 
      } 
     }); 

    }); 

    function updateImages(myRow, myActive) { 
     var rowInputs = j$(myRow).find('input[type="text"]'); 
     var contactId = (j$(rowInputs[0]).attr('id')); 
     var userId = (j$(rowInputs[1]).attr('id')); 
     var accountId = (j$(rowInputs[2]).attr('id')); 
     var contact = (j$(rowInputs[0]).val()); 
     var user = (j$(rowInputs[1]).val()); 
     var account = (j$(rowInputs[2]).val()); 

     if(contactId.indexOf("participant") != -1 || userId.indexOf("participant") != -1 || accountId.indexOf("participant") != -1) { 
      switch (myActive) { 
       case "contact": 
        // hide the other two 
        j$(rowInputs[1]).hide(); 
        j$(rowInputs[2]).hide(); 
        j$(rowInputs[1].parentNode).find('img').hide(); 
        j$(rowInputs[2].parentNode).find('img').hide(); 
        break; 
       case "user": 
        // hide the other two 
        j$(rowInputs[0]).hide(); 
        j$(rowInputs[2]).hide(); 
        j$(rowInputs[0].parentNode).find('img').hide(); 
        j$(rowInputs[2].parentNode).find('img').hide(); 
        break; 
       case "account": 
        // hide the other two 
        j$(rowInputs[0]).hide(); 
        j$(rowInputs[1]).hide(); 
        j$(rowInputs[0].parentNode).find('img').hide(); 
        j$(rowInputs[1].parentNode).find('img').hide(); 
        break; 
      } 
      if (contact !== '') { 
       j$(rowInputs[1]).hide(); 
       j$(rowInputs[2]).hide(); 
       j$(rowInputs[0].parentNode).find('img').show(); 
       j$(rowInputs[1].parentNode).find('img').hide(); 
       j$(rowInputs[2].parentNode).find('img').hide(); 
      }  
      else if (user !== '') { 
       j$(rowInputs[0]).hide(); 
       j$(rowInputs[2]).hide(); 
       j$(rowInputs[0].parentNode).find('img').hide(); 
       j$(rowInputs[1].parentNode).find('img').show(); 
       j$(rowInputs[2].parentNode).find('img').hide(); 
      } 
      else if (account !== '') { 
       j$(rowInputs[0]).hide(); 
       j$(rowInputs[1]).hide(); 
       j$(rowInputs[0].parentNode).find('img').hide(); 
       j$(rowInputs[1].parentNode).find('img').hide(); 
       j$(rowInputs[2].parentNode).find('img').show(); 
      } 
      if (account !== '' && contact !== '') { 
       j$(rowInputs[1]).hide(); 
       j$(rowInputs[2]).show(); 
       j$(rowInputs[0].parentNode).find('img').show(); 
       j$(rowInputs[1].parentNode).find('img').hide(); 
       j$(rowInputs[2].parentNode).find('img').hide(); 
      } 
     } 
    } 
</script> 

這裏是我試圖從localStorage的刪除值的代碼的相關部分：

 A4J.AJAX.AddListener({ 
      onafterajax: function(req,evt,data) { 

       console.log('************* activeButtons = ' + localStorage.activeButtons); 
       j$('[id$=deleteImage]').on('click', function(elem) { 
        console.log('the delete button was clicked'); 
        console.log(elem); 
        console.log('************** before ' + localStorage.activeButtons); 
        //here is where I need to remove the value from the localStorage 
          //I am passing in the elem as the function argument to determine 
          //what row is being deleted and what value I should remove from the 
          //local storage. 
        console.log('************** after ' + localStorage.activeButtons); 
       }); 
       console.log('************* activeButtons = ' + localStorage.activeButtons); 

       var lastRow = j$('table[id$=participantTable] tbody tr:last');     
       var active = localStorage.activeButtons.split(','); 

       var dataRows = j$('tr.dataRow'); 
       dataRows.each(function(index, elem) { 
        updateImages(elem, active[index]); 
       }); 
      } 
     }); 

任何幫助非常感謝。 謝謝。

Answer 1

斯普利特值到一個數組中，找到要刪除，並從陣列拼接它的價值：

var activeArray = localStorage.activeButtons.split(','); 
var idx = activeArray.indexOf(elem); // not sure what elem is, but this should be the value you want to remove 

if (idx > -1) 
    activeArray.splice(idx, 1); 

localStorage.activeButtons = activeArray.join(',');