Javascript 如何在所有打开的选项卡中更新本地存储

我将所有数据存储在浏览器本地存储中，并使用名为

Cart

的类来管理本地存储中的数据

class购物车{
构造函数（）{
此._标记='fafacart_项目'；
此项为.\u items=null；
这是。_orderId=null；
这是.\u配送={
id:null，
城市：空，
键入：“post”，
名称：“”，
手机：''，
电子邮件：“”，
地址：''，
邮政编码：''，
国家/地区代码：“”
};
这张优惠券={
活动：错误
};
这个._paymentMethod='在线'；
此参数为.\u validation=null；
//这个.restore（）；
window.addEventListener（'storage'，this.restore（））
}
还原（）{
var stored=Storage.getItem（此._标记）；
console.log（已存储）
如果（存储）{
此._items=存储的.items；
this.\u shipping=Object.assign（{}，this.\u shipping，stored.shipping）；
this.\u优惠券=Object.assign（{}，this.\u优惠券，stored.consupt）；
这是._paymentMethod=stored.paymentMethod；
此._validation=storage.validation；
this.orderId=stored.orderId；
}否则{
此项。_项=[]；
}
if（this.\u items.length==0）
this.valid=true；
}
}

我还有一个名为

CartHolder

的类，它显示本地存储中的所有数据。 它有一个名为“添加到购物车”的侦听操作按钮的全局事件 执行此方法后，请在浏览器上更新本地存储

导出默认类CartHolder扩展组件{
建造师（道具）{
超级（道具）；
此.state={
购物车：空
};
this.restore=this.restore.bind（this）；
}
组件willmount（）{
如果（此道具已支付）{
Cart.empty（）；
}
this.listen（'add-to-cart'，product=>{
购物车。添加（产品）；
这个.restore（）；
});
这个.restore（）；
}
还原（）{
this.setState（{cart:cart}）；
}
}

更新本地存储时，我看不到之前打开的其他浏览器选项卡上的数据，我只看到当前选项卡中的数据，通过刷新其他选项卡，我可以看到它们上的数据

---

我希望在其他选项卡中查看更新的本地存储数据，而不必刷新或重新加载浏览器选项卡

，因为浏览器选项卡位于客户端，唯一可行的方法是刷新所有浏览器选项卡以加载最新/最新数据

为此，您可以使用JS：

browser.tabs.reload();

---

但是，请注意，这是一个新的JS函数，目前并非所有浏览器都支持它。查看兼容性。

我的所有研究最终发现，当更新域的一个选项卡中的本地存储时，所有其他选项卡与此域一起打开，而被更新时，

您可以参考此链接我没有使用cookies，我使用的是本地存储，这不起作用不需要使事情复杂化。如果数据已更新，并且您只想刷新以显示更新的值，则只需刷新浏览器选项卡。事实上，互联网用户在更新重要内容（如购物车中的物品）后，经过良好的训练，可以刷新浏览器。另外，当他们退房时，我打赌你的购物车里有一个内容确认页面。因此，不必担心其他浏览器选项卡中的过时信息。