Ajax成功获取内容后，如何将其全局使用并传递至其他页面？

首先，先聊聊你用localStorage没成功的可能原因——大概率是没在正确时机获取内容，或者代码里藏了小bug。先把这个坑填上，再给你其他几种靠谱的方案：

1. 修复localStorage的使用方式 #

你原Ajax代码里有个明显的小问题：$('.demo').html(html);里的html应该是回调参数response吧？这会导致.demo根本没渲染出内容，自然存不到localStorage里。先修正并补上存储逻辑：

$.ajax({
  type:"POST",
  url: "joins.php",
  dataType:"html",
  data: data,
  success: function(response){
    $('.demo').html(response); // 这里把html改成response
    // 把.demo的文本内容存入localStorage
    localStorage.setItem('selectedProducts', $('.demo').text().trim());
  }
});

然后在目标页面读取时，这样写：

$(document).ready(function(){
  const savedProducts = localStorage.getItem('selectedProducts');
  if(savedProducts){
    // 把内容渲染到目标页面的元素，比如.target
    $('.target').text(savedProducts);
    // 可选：用完删除，避免残留
    localStorage.removeItem('selectedProducts');
  }
});

💡 额外排查点：

• 打开浏览器控制台，看看有没有报错（比如跨域？但同域名下localStorage是完全可用的）
• 确认存储操作是在Ajax成功回调之后执行的，不能提前存——那时候.demo还没内容

2. 通过URL参数传递（适合直接跳转场景） #

如果是要跳转到其他页面，可以把商品内容转成URL安全的字符串，拼在跳转链接里：

在Ajax成功回调里添加跳转逻辑：

success: function(response){
  $('.demo').html(response);
  // 把文本转成URL安全格式
  const productContent = encodeURIComponent($('.demo').text().trim());
  // 跳转到目标页面，比如target.html
  window.location.href = `target.html?products=${productContent}`;
}

目标页面读取参数：

$(document).ready(function(){
  const urlParams = new URLSearchParams(window.location.search);
  const products = decodeURIComponent(urlParams.get('products'));
  if(products){
    $('.target').text(products);
  }
});

这个方法适合一次性传递，不需要持久化存储的场景。

3. 使用Session Storage #

和localStorage逻辑几乎一样，但sessionStorage只在当前浏览器会话有效，关闭页面就自动清除，适合临时传递信息：

存储：

sessionStorage.setItem('selectedProducts', $('.demo').text().trim());

读取：

const savedProducts = sessionStorage.getItem('selectedProducts');

4. 服务器端存储（更可靠的方案） #

如果需要更稳定的传递（比如用户刷新页面也能保留信息），可以把商品信息存在服务器端的Session里：

在joins.php处理请求时存入Session：

// joins.php开头先启动Session
session_start();
// 假设你已经得到了要返回的商品文本内容$productText
$_SESSION['selectedProducts'] = $productText;

然后在目标页面（比如target.php）读取：

session_start();
if(isset($_SESSION['selectedProducts'])){
  $products = $_SESSION['selectedProducts'];
  // 输出到页面
  echo $products;
  // 可选：用完删除Session中的内容
  unset($_SESSION['selectedProducts']);
}

这个方法不受浏览器存储限制，适合需要长期保留或者更严谨的信息传递场景。

内容的提问来源于stack exchange，提问作者Tony Nagendra Kumar