How to save elements in array when i go to another html page?

Question

I'm making some very small e-commerce website (just for practice) and i stuck at shopping cart;

Simply it works like that -> you click button -> item adds to array shoppingCart = []; -> and on webpage itself i display lenght of this array. Just what i needed.

The problem is when i go to another page (shopping-cart.html) array displays as empty.

How can i save it?

BTW i just started learning JS

let shoppingCart = [];

function render() {
    document.getElementById("shopping-cart-header").innerHTML = shoppingCart.length;
    document.getElementById("fixed-shopping-cart").innerHTML = shoppingCart.length;
    if (shoppingCart.length > 0) {
        document.getElementById('shopping-cart-header').style.display = 'flex';
        document.getElementById('fixed-shopping-cart-body').style.display = 'flex';
        document.getElementById('fixed-shopping-cart').style.display = 'flex';
    }
}

function  addItem1(){
    shoppingCart.push('Parlament Oxfords');
    render()
}

function  addItem2(){
    shoppingCart.push('Loake Chester');
    render()
}
function  addItem3(){
    shoppingCart.push('Berwick 303');
    render()
}
function  addItem4(){
    shoppingCart.push('Berwick 5150');
    render()
}