LocalStorage 使用 JavaScript 從 object 中刪除項目

Question

我想從 localstorage object 中刪除一個項目：

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]

我存儲了信息，然后檢查是否找到該項目，我應該將其刪除：

/*** getID is the items clicked ***/

var retrievedData = localStorage.getItem("addToFavs");
    
    var parseData = jQuery.parseJSON(retrievedData);

    $.each(parseData, function(x,y){
        if(y['fav-name'] == getID){
            console.log(getID+' found on '+x);
            console.log(parseData[x]);
            localStorage.removeItem(parseData[x]);
            console.log(x+' removed');
        } else {
            console.log(getID+' NOT NOT found on '+x);
        }

}); // end $.each

提前致謝

Answer 1

你不能做這個：

localStorage.removeItem(parseData[x]);

您需要更新您解析的數組，或者創建一個新數組，然后將其stringify回 JSON 和setItem以更新 localStorage 中的值。 因為localStorage只能存儲Strings，不能存儲Arrays或者Objects。

filter將是一個很好的方法：

var jsonString = localStorage.getItem("addToFavs");
var arr = JSON.parse(jsonString);
// Filter to keep only those with a different ID than getID
arr = arr.filter(function(item) { return item['fav-name'] !== getID; });
// Store it back, stringified
localStorage.setItem("addToFavs", JSON.stringify(arr));

Answer 2

1. 本地存儲中的值是一個字符串
2. 按鍵讀取本地存儲值
3. 解碼字符串值
4. 應用 Array.prototype.filter function 從數組中過濾值
5. 編碼數組值
6. 使用相同的密鑰將其寫入本地存儲

Answer 3

不要嚇到你什么的

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}] 。 <---- 在這行代碼中addToFavs是本地存儲中的項目，而不是您存儲的 object。

並且本地存儲僅支持將 string:string 類型存儲為 item:value，因此

localStorage.removeItem(parseData[x]); <--- 這行代碼在這里試圖尋找一個項目，在你的情況下

這實際上在您的字符串化 object 內部，它本身就是addToFavs項目的價值，

因此，您必須從 object 中刪除該項目並再次存儲addToFavs ，如下所示。

 var ls = window.localStorage; ls.setItem('addToFavs', '[{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]'); var getId = 'fav-787336'; var item = JSON.parse(ls.getItem('addToFavs')); var updatedItems = item.filter(val => (val['fav-name'] === getId)); console.log(updatedItems); //update loacl storage again ls.setItem('addToFavs', JSON.stringify(updatedItems))

由於出於安全考慮，未授予 localStorage 訪問權限，因此代碼將無法運行，請隨意在瀏覽器控制台中運行代碼。