Javascript 在Map函数中存储会话数据的优缺点

有人能解释一下在（newmap（））构造函数中存储会话（敏感）数据的安全隐患是什么吗。除非随后关闭浏览器选项卡，否则数据将在应用程序的整个生命周期中持续存在。 根据MDN，它说所有的数据类型都可以存储在其中，所以我猜是否包括二进制数据类型。（只是一个线索）

在我的代码中

class example {
    constructor() {
        this.cache = new Map();
        this.loc = window.location.href;
    }
    async getdata() {
        let data;
        if (this.cache.has(this.loc)) {
            data = this.cache.get(this.loc);
        } else {
            let res = fetch(this.loc);
            if (res.ok) {
                data = res.json();
                this.cache.set(this.loc, data);
            }
        }
        // use data here e.g
        `<span>${data.username}</span>`
        
    }
}

类示例{
构造函数（）{
this.cache=newmap（）；
this.loc=window.location.href；
}
异步getdata（）{
让数据；
if（this.cache.has（this.loc））{
data=this.cache.get（this.loc）；
}否则{
让res=fetch（this.loc）；
如果（res.ok）{
data=res.json（）；
this.cache.set（this.loc，data）；
}
}
//在这里使用数据，例如
`${data.username}`
}
}

与对象或字符串常量等任何其他数据结构相比，映射没有具体的安全问题

它们容易受到同类攻击—转储内存、访问全局变量

我将把它放在一个闭包中，并在应用程序中传递对闭包的引用，以使它对页面上运行的任何其他代码都是不透明的

有关避免全局暴露状态的更多讨论，请参阅本文：

在构建代码时，我会使用更多的关注点分离-如下所示：

类数据缓存{
构造函数（href）{
this.cache=newmap（）；
this.loc=href；
}
异步_fetchData（）{
const res=等待获取（this.loc）；
如果（res.ok）{
data=res.json（）；
this.cache.set（this.loc，data）；
返回数据
}
}
异步getdata（）{
return（this.cache.has（this.loc））？this.cache.get（this.loc）：this.\u fetchData（）
}
}

为了更好地理解更好的逻辑，我添加了一个示例。我想知道的是，它是否足够、安全，并且不会随着页面数量的增加而导致内存泄漏。在我的SPA路由系统中，我为每个页面存储获取的数据，以便在数据所属页面的后续访问中使用。任何想法都将是一件伟大的事情。因为它是一个地图，它与你的页面是1:1的地图。只要您没有无限多的键，内存使用是可以预测的。