javascript - 未定义显示在我的表下方 - session 存储

Question

下面的代码有效，但问题是未定义显示在我的表格下方。我试图删除 sessionStorage.basket === undefined，但它删除了整个表。有人可以帮助我吗？

// Load basket on page
window.onload = loadBasket;

// Displays basket in page.
function loadBasket() {
    // Get basket from local storage or create one if it does not exist
    var basketArray;
    if(sessionStorage.basket === undefined || sessionStorage.basket === "") {
        // Store as an array
        basketArray = [];
    }
    else {
        // Parse the data as an object
        basketArray = JSON.parse(sessionStorage.basket);
    }
    // Build string with basket HTML
    var htmlStr = "<form action='php/checkout.php' method='post'>";
    // Get table body
    var tableBody;
    // Display table headers
    var tableHeader = "<tr><th>Product Image</th><th>Product Name</th><th>Price</th></tr>\n";
    // Store IDs as array
    var prodIDs = [];
    // For loop to display more products on the table
    for(var i=0; i<basketArray.length; ++i) {
        tableBody += "<tr><td class='image_column'>" + "<img class='basket_img' src='" + basketArray[i].image + "'>" + "</td><td>" + basketArray[i].name + "</td><td>£" + basketArray[i].price + "</td></tr>";
        // Push data to insert into the database
        prodIDs.push({
            image: basketArray[i].image, 
            name: basketArray[i].name, 
            price: basketArray[i].price, 
            count: 1
        });
    }
    // Add hidden field to form that contains stringified version of product ids.
    htmlStr += "<input type='hidden' name='prodIDs' value='" + JSON.stringify(prodIDs) + "'>"; 
    // Display the number of items in the basket
    htmlStr += "<p class='basket_items'>Number of items in basket: " + "<span style='color:red'>" + basketArray.length + "</span>" + "</p>"; 
    // Add checkout and empty basket buttons
    htmlStr += "<button class='empty_basket' onclick='emptyBasket()'>Empty Basket</button>";
    htmlStr += "<input class='checkout_button' type='submit' value='Checkout'></form>";
    // Display number of products in basket
    document.getElementById("basketDiv").innerHTML = htmlStr;
    // Display table
    document.getElementById("basket_list").innerHTML = tableHeader + tableBody;
}

Answer 1

使用 localStorage 而不是 sessionStorage 直到没有特定的使用理由。

原因:sessionStorage 每个窗口都可用，您可能已将购物篮的值(value)存储在其他窗口并试图进入不同的窗口。

Difference between localStorage instead of sessionStorage:

本地存储

存储在 localStorage 中的数据一直存在，直到被明确删除。所做的更改将被保存并可供所有当前和将来访问该网站时使用。

session 存储

对于 sessionStorage，更改仅适用于每个窗口(或 Chrome 和 Firefox 等浏览器中的选项卡)。所做的更改将被保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，存储将被删除。

你的问题:

首先确保您在 localStorage 中正确设置值(对象数组)。这样做:

localStorage.setItem("basket", JSON.stringify(basketvalues));

现在 loadBasket() 函数中的条件将如下所示:

if(localStorage.getItem("basket") === undefined || localStorage.getItem("basket") === "") {
        // Store as an array
        basketArray = [];
    }
    else {
        // Parse the data as an object
        basketArray = JSON.parse(localStorage.getItem("basket"));
    }

有关 localStorage 的更多信息，请阅读此链接:

https://www.w3schools.com/jsref/prop_win_localstorage.asp