如何用jQuery结合sessionStorage展示商品详情？购物车实现疑问

Hey there! Let's tackle your questions one by one, since you're working on a jQuery shopping cart with JSON data—super relatable project!

Short answer: No, this isn't a reliable approach. Here's why:

• Product names aren't guaranteed to be unique. You might have multiple products with the same name (e.g., "Basic Cotton T-Shirt" in different sizes/colors, but different SKUs/IDs). Storing the name would lead to conflicts when trying to fetch the correct product details later.
• Names can change (e.g., rebranding, typos fixed), which would break your sessionStorage lookup if the name in the JSON doesn't match what's stored.

Instead, you should use a unique, immutable product ID (like an id field in your JSON data). This ID should be a fixed value that never changes, even if the product's name or other details are updated.

Here's a step-by-step implementation that fixes the identifier issue and handles the cross-page data flow:

Step 1: Store the Product ID (Not Name) on Your List Page #

When a user clicks a product, grab its unique ID from your JSON data or a data attribute, store it in sessionStorage, then redirect to product.html:

// Assume you've rendered products from your JSON, each product element has a data-id attribute
$('.product-item').on('click', function() {
  // Get the unique product ID from the element's data attribute
  const productId = $(this).data('id');
  // Store the ID in sessionStorage
  sessionStorage.setItem('selectedProductId', productId);
  // Redirect to the product details page
  window.location.href = 'product.html';
});

Pro tip: When rendering your product list from JSON, add the product's ID to each item as a data-id attribute (e.g., <div class="product-item" data-id="123">...</div>) for easy access.

Step 2: Fetch and Display Details on product.html #

On page load, retrieve the stored ID, fetch your JSON data, find the matching product, and render its details:

$(document).ready(function() {
  // Get the selected product ID from sessionStorage
  const selectedProductId = sessionStorage.getItem('selectedProductId');

  // Handle cases where no ID is stored (e.g., user navigated directly to product.html)
  if (!selectedProductId) {
    window.location.href = 'index.html'; // Redirect back to product list
    return;
  }

  // Fetch your JSON product data
  $.getJSON('products.json', function(allProducts) {
    // Find the product with the matching ID
    const selectedProduct = allProducts.find(product => product.id == selectedProductId);

    if (selectedProduct) {
      // Render the product details into your page elements
      $('#product-title').text(selectedProduct.name);
      $('#product-price').text(`$${selectedProduct.price.toFixed(2)}`);
      $('#product-description').text(selectedProduct.description);
      $('#product-image').attr('src', selectedProduct.imageUrl);
    } else {
      // Handle cases where the product ID doesn't exist in the JSON
      $('.product-container').html('<p>Sorry, that product could not be found.</p>');
    }
  }).fail(function() {
    // Handle JSON loading errors
    alert('Oops! Failed to load product data.');
  });

  // Optional: Clear the stored ID after use to avoid leftover data
  sessionStorage.removeItem('selectedProductId');
});

Bonus Notes #

• sessionStorage vs localStorage: sessionStorage only persists for the current browser tab session (closes when the tab is closed), which is perfect for temporary selections like this. If you needed the selection to persist across browser restarts, use localStorage instead.
• Error Handling: Always add checks for missing IDs, missing products, and failed JSON requests—this makes your app more robust for users.

内容的提问来源于stack exchange，提问作者Babe