How Can I Remove Data Which Is Stored In Local Storage?

If I console.log(localStorage.getItem('cartCache')), the result like this : {'dataCache':[{'id':20,'quantity':1,'total':100000,'request_date':'27-08-2017 20:31:00'},{'id':53,'quant

Solution 1:

You need to retrieve the object modify it and then store it again in local storage,

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

Solution 2:

You can use array#splice() to delete an element from an array. Use JSON.parse() to get the object from the localStorage and then iterate through your array and delete the elements by comparing their id and then store the result back to 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));

Solution 3:

Here you go with an example solution 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>

Here is the solution for your scenario

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>

Hope this will help you.

Solution 4:

You can try this:

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

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

What I am simply doing here is using the parse() method of the JSON object to convert the item in localStorage to a JS object.
I'm chaining the call by accessing dataCache directly instead of assigning it to a variable, then I chain the filter() call as the return value of dataCache is an array. I'm filtering out data where id is not equal to 20.
I assign the result to the filtered variable, afterwards I call stringify() passing in the filtered result.
Finally, I save it to 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));