如何刪除存儲在本地存儲中的數據？

Question

如果我CONSOLE.LOG（localStorage.getItem（ 「cartCache」）），結果是這樣的：

{"dataCache":[{"id":20,"quantity":1,"total":100000,"request_date":"27-08-2017 20:31:00"},{"id":53,"quantity":1,"total":200000,"request_date":"27-08-2017 20:38:00"}]} 

我想通過ID刪除在緩存中的數據

例如，我刪除ID = 20，它會刪除ID = 20在緩存

所以得到的結果是這樣的：

{"dataCache":[{"id":53,"quantity":1,"total":200000,"request_date":"27-08-2017 20:38:00"}]} 

我該怎麼辦呢？

Answer 1

您可以使用array#splice()從數組中刪除元素。使用JSON.parse()從localStorage獲取對象，然後遍歷數組並通過比較它們的ID刪除元素，然後將結果存儲回localStorage。

var str = localStorage.getItem('cartCache'); 
var cartCache = JSON.parse(str); 
var idToRemove = 20; 
cartCache.dataCache.forEach((obj,i) => { 
    if(obj.id === idToRemove) 
    cartCache.dataCache.splice(i,1); 
}); 
localStorage.setItem('cartCache', JSON.stringify(cartCache)); 

Answer 2

您需要檢索對象進行修改，然後在本地存儲再存放起來，

var retrievedObj = JSON.parse(localStorage.getItem("cartCache")); 
retrievedObj.dataCache[0].id = 53; 
localStorage.setItem('cartCache', JSON.stringify(retrievedObj)); 

Answer 3

在這裏你去用一個例子液https://jsfiddle.net/rhwf1j5g/1/

var data = {"dataCache":[{"id":20,"quantity":1,"total":100000,"request_date":"27-08-2017 20:31:00"},{"id":53,"quantity":1,"total":200000,"request_date":"27-08-2017 20:38:00"}]}; 
 

 
var removeid = 20; 
 

 
var newData = $.grep(data.dataCache, function(value) { 
 
    return value.id != removeid; 
 
}); 
 

 
console.log(newData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

這裏是您場景的解決方案

var data = JSON.parse(localStorage.getItem("cartCache")); 
 

 
var removeid = 20; 
 

 
var newData = $.grep(data.dataCache, function(value) { 
 
    return value.id != removeid; 
 
}); 
 

 
localStorage.setItem("cartCache", { "dataCache" : newData });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望這會幫助你。

Answer 4

你可以試試這個：

const filtered = JSON.parse(localStorage.cartCache) 
.dataCache.filter(filteredObj => filteredObj.id !== 20); 

localStorage.cartCache = JSON.stringify({ "dataCache": filtered }); 

什麼我只是在這裏做的是使用JSON對象的parse()方法將項目中localStorage轉換爲JS對象。
我通過直接訪問dataCache來鏈接呼叫，而不是將其分配給變量，然後我鏈接filter()調用，因爲返回值dataCache是一個數組。我正在篩選出數據，其中id不等於20。
我將結果賦值給filtered變量，之後我呼叫stringify()傳入filtered結果。
最後，我把它保存到localStorage。

// LocalStorage Mock 
 
let localStorageMock = (function() { 
 
    var storage = {}; 
 

 
    return { 
 
    setItem: function(key, value) { 
 
     storage[key] = value || ''; 
 
    }, 
 
    getItem: function(key) { 
 
     return storage[key] || null; 
 
    }, 
 
    removeItem: function(key) { 
 
     delete storage[key]; 
 
    }, 
 
    get length() { 
 
     return Object.keys(storage).length; 
 
    }, 
 
    key: function(i) { 
 
     var keys = Object.keys(storage); 
 
     return keys[i] || null; 
 
    } 
 
    }; 
 
})(); 
 
Object.defineProperty(window, 'localStorage', { value: localStorageMock }); 
 

 

 
// Code you need 
 
localStorage.cartCache = JSON.stringify({"dataCache":[{"id":20,"quantity":1,"total":100000,"request_date":"27-08-2017 20:31:00"},{"id":53,"quantity":1,"total":200000,"request_date":"27-08-2017 20:38:00"}]}); 
 

 
const filtered = JSON.parse(localStorage.cartCache) 
 
.dataCache.filter(filteredObj => filteredObj.id !== 20); 
 

 
localStorage.cartCache = JSON.stringify({ "dataCache": filtered }); 
 
console.log(JSON.parse(localStorage.cartCache));