CODEWITHSUNDEEP
javascriptjqueryarraysjsonlocal-storage
moses toh
moses toh

Reputation: 13172

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,"quantity":1,"total":200000,"request_date":"27-08-2017 20:38:00"}]}

I want to remove the data in the cache by id

For example, I remove id = 20, it will remove id = 20 in the cache

So the result to be like this :

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

How can I do it?

Upvotes: 3

Views: 675

Answers (4)

codejockie
codejockie

Reputation: 10864

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));

Upvotes: 0

Hassan Imam
Hassan Imam

Reputation: 22534

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));

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

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));

Upvotes: 2

Related Questions