SessionStorage 可在单次页面会话中临时记录广告来源，需在页面加载时从 URL 参数（如 utm_source）提取并存入，首次写入后防止覆盖，用户关键行为时读取上报，关闭标签页自动清空，兼容所有现代浏览器。
SessionStorage 可以在单次页面会话中临时记录用户点击广告的来源，适合用于统计本次访问中用户从哪个广告渠道进来的行为，比如来自微信朋友圈广告、百度推广或抖音跳转链接等。关键在于：来源信息必须在用户点击广告跳转到你的页面时，就通过 URL 参数（如 utm_source）带进来，并在页面加载初期存入 sessionStorage，后续操作（如点击按钮、提交表单）可随时读取，关闭标签页后自动清空。
1. 从 URL 获取广告来源参数并存入 SessionStorage
用户点击广告时，推广平台通常会在跳转链接末尾拼接来源标识，例如：
https://your-site.com/landing?utm_source=wechat&utm_medium=cpc&utm_campaign=spring2024页面加载时立即解析并保存：
function saveAdSource() {
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('utm_source') || urlParams.get('ad_source') || 'direct';
sessionStorage.setItem('ad_source', source);
}
saveAdSource(); // 页面加载即执行
2. 确保只存一次，避免覆盖
如果用户在同个会话中多次打开带不同参数的链接（比如先点微博广告，再点小红书广告），默认会覆盖。若业务要求“以首次来源为准”，需加判断：
立即学习“Java免费学习笔记（深入）”；
- 检查
sessionStorage.getItem('ad_source')是否已存在 - 仅当为空时才写入，防止后续跳转干扰原始归因
修改后的写法：
function saveAdSourceOnce() {
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('utm_source') || urlParams.get('ad_source') || 'direct';
if (!sessionStorage.getItem('ad_source')) {
sessionStorage.setItem('ad_source', source);
}
}
3. 在用户触发关键行为时读取并上报
比如用户点击“立即领取”按钮，你想把这次转化关联到初始广告来源：
document.getElementById('claimBtn').addEventListener('click', function() {
const adSource = sessionStorage.getItem('ad_source') || 'unknown';
// 上报给统计系统（如埋点接口）
fetch('/log/conversion', {
method: 'POST',
body: JSON.stringify({ ad_source: adSource, event: 'claim' })
});
});
注意：不要在异步回调（如 AJAX 成功后）再读取，因为 sessionStorage 在当前标签页始终可用，无需额外校验。
4. 调试与兼容性提醒
开发时可通过控制台快速验证：
- 打开带参数的链接 → 输入
sessionStorage.getItem('ad_source')查看是否存入 - 新开无参标签页 → 该值应为
null（隔离性验证）
兼容性没问题：所有现代浏览器（包括 iOS Safari）均支持 sessionStorage；但注意它不跨标签页共享，也不持久化 —— 这正是“单次会话”的设计本意。
