Why i need to clear local storage manually. Every time my site load

I made a shopping cart and make update cart function in JavaScript that working fine but when I navigate to other page my cart no automatically turn to (1 ) and an error rise in console like this:

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at updateCart ((index):447)
    at (index):411

and my JavaScript code is:

{% block js %}
<script>
// Find out the cart items from localStorage
if (localStorage.getItem('cart') == null) {
    var cart = {};
} else {
    cart = JSON.parse(localStorage.getItem('cart'));
    document.getElementById('cart').innerHTML = Object.keys(cart).length;
    updateCart(cart);
}
// If the add to cart button is clicked, add/increment the item
$('.cart').click(function() {
    var idstr = this.id.toString();
    if (cart[idstr] != undefined) {
        cart[idstr] = cart[idstr] + 1;
    } else {
        cart[idstr] = 1;
    }
    updateCart(cart);
    
});
//Add Popover to cart
$('#popcart').popover();
updatePopover(cart);
function updatePopover(cart)
{
    console.log('We are inside updatePopover');
    var popStr = "";
    popStr = popStr + " <h5>Cart for your items in my shopping cart</h5><div class='mx-2 my-2'>";
    var i = 1;
    for (var item in cart){
        popStr = popStr + "<b>" + i + "</b>. ";
        popStr = popStr + document.getElementById('name' + item).innerHTML.slice(0,19) + "... Qty: " + cart[item] + '<br>';
        i = i+1;
    }
    popStr = popStr + "</div>" 
    console.log(popStr);
    document.getElementById('popcart').setAttribute('data-content', popStr);
    $('#popcart').popover('show');
}
function updateCart(cart) {
    var sum = 0;
    for (var item in cart) {
        sum = sum + cart[item];
        document.getElementById('div' + item).innerHTML = "<button id='minus" + item + "' class='btn btn-dark minus'>-</button> <span id='val" + item + "''>" + cart[item] + "</span> <button id='plus" + item + "' class='btn btn-dark plus'> + </button>";
    }
    localStorage.setItem('cart', JSON.stringify(cart));
    document.getElementById('cart').innerHTML = sum;
    console.log(cart);
    updatePopover(cart);
}
// If plus or minus button is clicked, change the cart as well as the display value
$('.divpr').on("click", "button.minus", function() {
    a = this.id.slice(7, );
    cart['pr' + a] = cart['pr' + a] - 1;
    cart['pr' + a] = Math.max(0, cart['pr' + a]);
    document.getElementById('valpr' + a).innerHTML = cart['pr' + a];
    updateCart(cart);
});
$('.divpr').on("click", "button.plus", function() {
    a = this.id.slice(6, );
    cart['pr' + a] = cart['pr' + a] + 1;
    document.getElementById('valpr' + a).innerHTML = cart['pr' + a];
    updateCart(cart);
});
</script>
{%endblock%}

Is cart being initialized regardless?..

Example:

<script>
var cart = {}; /*dictionary/JSON obj.*/
cart = (localStorage.getItem('cart') == null) ? {}:  (JSON.parse(localStorage.getItem('cart')) );
if(cart != {}) { /*post-conditional. If exists...*/
 document.getElementById('cart').innerHTML = Object.keys(cart).length;
    updateCart(cart);
}
/*... Subsequent jsx elements updating and rendering h5, scss selector ajax queries, slicing data and updating to innerHTML/document, etc... */
/*If the localStorage cart object/ dictionary is not appending to localStorage as Cache/ Buffer/ Memory independent of the webpage 
(i.e. passes independent and filled to next a.href traversed webpage node, etc.)
, then does it need similar information...?
 Is it localized to that page ONLY? Is it becoming undefined upon 
traversing to another webpage, and not stored ...?*/
</script>
1 Like

its work but when I navigate to other page it initialize to 1 and cart button not working. It seems it value not store on other webpages

would changing the localStorage object to the sessionStorage keyword be a possible alternative?
Albeit more limited, (in theory), the data could transfer between panels, so long as the link goes from one page to the next in the same web browser tab…
Moreover, in one such case, the data accumulated/ stored by localStorage/sessionStorage is apparently abstract once initialized per session, per tab script execution…

URL: LocalStorage, sessionStorage

2 Likes

I assume you’re using Chome or a chromium-based browser (like Edge)? It’s scoped to one endpoint. So if you store something for your app at www.example.com, it’s stored for www.example.com, not for www.other-url.com

I an sorry I am not getting your point perfectly. Can you Kindly explain what your are trying to say?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.