<div class="test-container">
  <div class="test-section">
    <h3>第三方 Cookie 测试</h3>
    <button id="setThirdPartyCookie">设置第三方 Cookie</button>
    <button id="readThirdPartyCookie">读取第三方 Cookie</button>
    <div id="thirdPartyCookieResult"></div>
  </div>

  <div class="test-section">
    <h3>localStorage 测试</h3>
    <button id="setLocalStorage">设置 localStorage 项</button>
    <button id="readLocalStorage">读取 localStorage 项</button>
    <div id="localStorageResult"></div>
  </div>

  <div class="test-section">
    <h3>跨站点请求测试</h3>
    <button id="makeCrossSiteRequest">发送跨站点请求</button>
    <div id="crossSiteRequestResult"></div>
  </div>
</div>

<script>
  // 第三方 Cookie 测试
  document.getElementById('setThirdPartyCookie').addEventListener('click', () => {
    try {
      document.cookie = "testCookie=value; domain=.example.com; path=/";
      document.getElementById('thirdPartyCookieResult').textContent =
        "Cookie 设置成功。请检查 Safari 的开发者工具以查看是否被阻止。";
    } catch (e) {
      document.getElementById('thirdPartyCookieResult').textContent =
        "设置 Cookie 时出错：" + e.message;
    }
  });

  document.getElementById('readThirdPartyCookie').addEventListener('click', () => {
    const cookies = document.cookie;
    document.getElementById('thirdPartyCookieResult').textContent =
      "当前 Cookie：" + cookies;
  });

  // localStorage 测试
  document.getElementById('setLocalStorage').addEventListener('click', () => {
    try {
      localStorage.setItem('testKey', 'testValue');
      document.getElementById('localStorageResult').textContent =
        "localStorage 项设置成功";
    } catch (e) {
      document.getElementById('localStorageResult').textContent =
        "设置 localStorage 时出错：" + e.message;
    }
  });

  document.getElementById('readLocalStorage').addEventListener('click', () => {
    try {
      const value = localStorage.getItem('testKey');
      document.getElementById('localStorageResult').textContent =
        "localStorage 值：" + value;
    } catch (e) {
      document.getElementById('localStorageResult').textContent =
        "读取 localStorage 时出错：" + e.message;
    }
  });

  // 跨站点请求测试
  document.getElementById('makeCrossSiteRequest').addEventListener('click', async () => {
    try {
      const response = await fetch('https://api.example.com/test', {
        credentials: 'include'
      });
      const data = await response.json();
      document.getElementById('crossSiteRequestResult').textContent =
        "请求成功。请检查网络面板以查看详细信息。";
    } catch (e) {
      document.getElementById('crossSiteRequestResult').textContent =
        "发送请求时出错：" + e.message;
    }
  });
</script>

<style>
  .test-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .test-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  button {
    margin: 5px;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
  #thirdPartyCookieResult,
  #localStorageResult,
  #crossSiteRequestResult {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }
</style>