如何修復在localStorage中存儲為單個字符串的數組中的項目

Question

我創建了一個簡單的購物系統，如果您單擊所需的商品，它會將商品添加到購物車中。 創建此功能后，我決定將其保存在頁面重新加載時。 我目前正在使用 localStorage，但如果您知道更好的方法，請告訴我，我也是購物車中要保存到新 HTML 頁面的物品。 我遇到的問題是，當我單擊一個按鈕時，它會將該按鈕的名稱保存到一個數組列表中。 然后將該數組列表保存到 localStorage，但不是將其保存為單獨的字符串，而是將其保存為一個字符串。 有想法該怎么解決這個嗎？ 謝謝你。

代碼：

const cartItems = [];

function cartAmount() {
    var itemsInCart;

    itemsInCart = document.getElementById('cartamount');

    if(localStorage.length >= 1) {
        itemsInCart.style.visibility = "visible";
    }

    itemsInCart.innerHTML = localStorage.length;
}

function addCart(id) {
    var itemVal, a;

    a = document.getElementById(id);
    itemVal = a.textContent;
    console.log(itemVal);


    if(cartItems.includes(a.textContent)) {
        console.log('item already in cart');
    } else {
        cartItems.push(itemVal);
        cartAmount();
        console.log('added Item to cart');
    }
}

function saveCart() {
    cartAmount();
    window.localStorage.setItem('cart', cartItems);
}

HTML：

<ul id="wrapper">
        <li>
            <a href="#" id="item1" onclick="addCart(this.id); saveCart();">Drum</a>
        </li>
        <li>
            <a href="#" id="item2" onclick="addCart(this.id); saveCart();">Stand Off</a>
        </li>
        <li>
            <a href="#" id="item3" onclick="addCart(this.id); saveCart();">Seat</a>
        </li>
        <li>
            <a href="#" id="item4" onclick="addCart(this.id); saveCart();">Drum Sticks</a>
        </li>
        <li>
            <a href="#" id="item5" onclick="addCart(this.id); saveCart();">Symbols</a>
        </li>
        <li>
            <a href="#" id="item6" onclick="addCart(this.id); saveCart();">Keyboard</a>
        </li>
        <li>
            <a href="#" id="item7" onclick="addCart(this.id); saveCart();">High Hat</a>
        </li>
        <li>
            <a href="#" id="item8" onclick="addCart(this.id); saveCart();">Bass Drum</a>
        </li>
        <li>
            <a href="#" id="item9" onclick="addCart(this.id); saveCart();">Snare Drum</a>
        </li>
        <li>
            <a href="#" id="item10" onclick="addCart(this.id); saveCart();">Jake Inator</a>
        </li>
        <li>
            <a href="#" id="item11" onclick="addCart(this.id); saveCart();">Habachi</a>
        </li>
    </ul>

Answer 1

不用運行window.localStorage.setItem('cart', cartItems) ，而是用window.localStorage.setItem('cart', JSON.stringify(cartItems))替換它這實際上會將您的數組編碼為 JSON 字符串。

然后，當您想檢索該數組時，您可以運行JSON.parse(window.localStorage.getItem('cart')) ，這將返回您保存的數組。 理想情況下，您可以將JSON.parse包裝在try {} catch(e) {}中，這樣您就可以確保在 localStorage 值為 null 時您的應用不會崩潰。