Javascript 如何传输浏览器&x2019；跨页面的会话状态？

我想实现一个绑定到浏览器会话历史记录的客户端购物车。这意味着添加到购物车或从购物车中删除的每个项目都应该创建一个新的会话状态，并且在会话历史记录中回溯或向前应该相应地影响购物车

据我所知，仅允许在会话状态下存储数据（以及在浏览器中的其他位置存储数据）。下面是一个购物页面的代码片段，它允许用户将项目添加到他的购物车中，中断他的活动以转到主页并稍后继续，并在会话历史中返回或前进，同时更改购物车：

试验
addEventListener（“加载”），函数（事件）{
功能设置（数据）{
let element=document.getElementById（“数据”）；
element.textContent=数据；
}
for（让文档的链接.links）{
link.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
让data=history.state | |[]；
如果（link.href.includes（“item=”））{
data.push（link.textContent）；
}
history.pushState（数据“”，link.href）；
设置（历史记录、状态）；
});
}
addEventListener（“popstate”），函数（事件）{
设置（事件状态）；
});
设置（历史记录、状态）；
});
控制：

数据：

如果不同的标签可以有不同的购物车，或者关闭标签会破坏购物车都无关紧要，请签出。它在会话中存储内容。

我终于想出了一个涉及和的解决方案。对于添加到购物车中的每个项目，我使用Web存储API将项目存储在浏览器会话存储中的购物车阵列中，以便这些项目跨页面持久化。我还使用history API将项目和购物车数组的长度存储在浏览器会话历史的新会话状态中，以便当用户返回或转发到此会话状态时，我可以相应地更新浏览器会话存储中的购物车数组

试验
addEventListener（“加载”），函数（事件）{
功能设置（数据）{
let element=document.getElementById（“数据”）；
element.textContent=数据；
}
for（让文档的链接.links）{
如果（link.href.includes（“item=”））{
link.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
if（！（“会话存储中的购物车”）{
sessionStorage.cart=JSON.stringify（[]）；
}
让cart=JSON.parse（sessionStorage.cart）；
cart.push（link.textContent）；
sessionStorage.cart=JSON.stringify（cart）；
让状态={
cartLength:cart.length，
cartItem:link.textContent
};
历史。pushState（州号“”）；
设置（购物车）；
});
}
}
addEventListener（“popstate”），函数（事件）{
if（！（“会话存储中的购物车”）{
返回；
}
让cart=JSON.parse（sessionStorage.cart）；
如果（！history.state | | cart.length>history.state.cartLength）{
cart.pop（）；
sessionStorage.cart=JSON.stringify（cart）；
}else if（cart.length
数据：

所有页面是否都在同一个域中？您正在尝试在选项卡之间共享状态吗？@CharlesBamford是的，它们位于同一个域上。正如我所说，Web存储API不使用会话状态（即存储在浏览器历史记录中的数据），而是使用客户端状态。