Angular: 2 bugs in saving to local storage - json

Question

I have 2 bugs in methods that save products to local storage (when a user adds them to 'favorites').
The code is part of Angular service, but it can be read without this reference also.
First bug: Sometimes, when a user saves a product to favorites, not one, but multiple products get stored.
Second bug: When I store too many products, I get an error saying that the storage is full (it's full because I parse JSON wrongly, so unwanted additional backslashes are added).
This is the codepan (you can see the result in the console): https://codepen.io/mandy555/pen/dyPVGxj
storage;
storageKeys;
x;
i = 0;
saveId;
arr;
normalArr;
productInStore;
productsInStore;
idsInStore;
newIds;
newProducts;
favorites;
storageAvailable(type) {
try {
this.storage = window[type];
this.x = '__storage_test__';
this.storage.setItem('x', this.x);
this.storage.removeItem('x');
return true;
}
catch (e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
(this.storage && this.storage.length !== 0);
}
}
storeFavorite(product = '', productId = '') {
productId = String(productId);
this.normalArr = [];
if (this.storageAvailable('localStorage')) {
this.storage = window.localStorage;
if (!this.storage.getItem('favorites_id')) {
this.saveId = productId;
this.normalArr.push(product);
} else {
this.productsInStore = JSON.parse(this.storage.getItem('favorites_product'));
if (this.storage.getItem('favorites_id').indexOf(',') === -1) {
this.arr = [this.storage.getItem('favorites_id')];
this.normalArr = this.productsInStore;
} else {
this.arr = this.storage.getItem('favorites_id').split(',');
this.normalArr = this.productsInStore;
}
if (!this.arr.includes(productId) && productId !== '') {
this.saveId = this.storage.getItem('favorites_id') + ',' + productId;
this.normalArr.push(product);
} else {
this.saveId = this.storage.getItem('favorites_id');
}
}
this.storage.setItem('favorites_id', this.saveId);
this.storage.setItem('favorites_product', JSON.stringify(this.normalArr));
} else {
this.storage = null;
}
}
deleteFavorite(productId = '') {
productId = String(productId);
this.normalArr = [];
if (this.storageAvailable('localStorage')) {
this.storage = window.localStorage;
if (this.storage.getItem('favorites_id') && this.storage.getItem('favorites_product')) {
this.productsInStore = JSON.parse(this.storage.getItem('favorites_product'));
if (this.storage.getItem('favorites_id').indexOf(',') === -1) {
this.storage.clear();
} else {
this.idsInStore = this.storage.getItem('favorites_id').split(',');
this.newIds = this.idsInStore.filter(id => {
return id !== productId;
});
this.newproducts = this.productsInStore.filter(product => {
return String(product.id) !== productId;
});
this.newIds = this.newIds.join();
this.storage.setItem('favorites_id', JSON.stringify(this.newIds));
this.storage.setItem('favorites_product', JSON.stringify(this.newproducts));
}
}
} else {
this.storage = null;
}
}

Answer 1

The first problem was that I forgot to assign storage to local storage. The second solution was to save x and not JSON.stringify(x) in the local storage, since x was already a string. The corrected version is here:
https://codepen.io/mandy555/pen/dyPVGxj