Removing Item Stored in Local Storage and Object

Question

I have built a client side cart, however now i am having an extremely difficult issue, i don't know what to do about it. My cart has a restriction which is you cannot buy tickets from two different vendors or events at the same time. Now if you try to do this what "should" happen is that the cart should clear the previous data in the cart and add the new data.

This is my function that clears my cart:

$cart.clear = function() {

      // Clear cart data
      $cart.cart = newCart; // Does not work


      // Remove cart from storage
      delete $localStorage.cart; // Does not work
      // Recreate empty cart
      $localStorage.cart = $cart.cart; // Does not work

  }

The above code works only ONCE that is after the initial page refresh, any attempts to clear the cart after that fail, the data is NEVER deleted.

I have been at this for a while now and now i'm total confused. This is basically what my cart service looks like:

.factory('$cart', function ($window, $localStorage) {

        var $cart = {};

        // Creating New Cart Object
        var newCart = {
            info: {},
            tickets: [],
            customer: {},
            extras: []
        };

        $cart.cart = newCart;

        $cart.load = function() {
            $cart.cart = $localStorage.cart || newCart;
        }


        $cart.update = function() {
            $localStorage.cart = $cart.cart;
        }

        $cart.clear = function() {
            ...
        }

        $cart.addTicket = function(params) {
            ...
        };

        $cart.removeTicket = function(index) {
            ...
        }

        $cart.removeExtra = function(index) {
            ...
        }

        var init = function() {
            $cart.load();
        }

        init();

        return $cart;


    })

I was using $window.localStorage.setItem() and $window.localStorage.removeItem before to add and remove items from my cart, when i noticed this issue i switched to ngStorage to see if that would work but it still did not work.

LocalStorage stores only strings. You are trying to set a JavaScript object so in memory it will be a string of `'[object object]'`. you should stringify it to JSON to store then parse it on read. Also you should not delete the property directly. You should use `localStorage.remoteItem()` and `localStorage.getItem()` https://developer.mozilla.org/en-US/docs/Web/API/Storage — ste2425, Oct 23 '15 at 08:20
Yes that is true but with ngStorage you need not worry about that, all objects are converted for you automatically making it easier for you to read and set objects. That is however not my issue, if you read my post then you will notice that i did use localStorage.setItem etc. before and when that did not work i switched to ngStorage. — user3718908x100, Oct 23 '15 at 08:30
@ngLover I'm soo confused, i didn't think that would work but it seems to be working fine now, can you please explain why i need to stringify the object and parse it again before re-assinging? — user3718908x100, Oct 23 '15 at 08:42
@user3718908 i had the same issue then came up to this solution , this is due to same reference of object since in javascript copy of object share same references, hope you get it , accept ans if satisfied. — ngLover, Oct 23 '15 at 08:51

score 1 · Accepted Answer · answered Oct 23 '15 at 08:49

1

just try this one in your controller.

$cart.cart =JSON.parse(JSON.stringify(newCart));

removing the reference of the object to make new copy of the object.

answered Oct 23 '15 at 08:49

ngLover

4,439
3
20
42

Wow thank you soo much, i think i get it now, you mean it wasn't making a new copy of the object before rather it was assigning the old one. :) – user3718908x100 Oct 23 '15 at 08:52
why not `angular.copy(newCart);`? If you need to duplicate the item. – ste2425 Oct 23 '15 at 13:58
@ngLover sorry to be pedantic but they aren't one and the same. http://stackoverflow.com/questions/29780376/differences-between-angular-copy-and-json-parsejson-stringify#answer-29780884 In this specific use case that isn't an issue though. – ste2425 Oct 23 '15 at 14:59
@ngLover see fiddle: http://jsfiddle.net/wumdm159/1/ Ive added angulars code in a JavaScript comment. Bit too big for here. – ste2425 Oct 29 '15 at 08:18

Removing Item Stored in Local Storage and Object

1 Answers1