时间戳

首页 > 解决方案 > 如何使用 cookie 跟踪多个弹出窗口？或其他解决方案表示赞赏

javascript - 如何使用 cookie 跟踪多个弹出窗口？或其他解决方案表示赞赏

问题描述

我正在为每个具有特定唯一 ID 的弹出窗口生成多个（无限）弹出窗口，每个弹出窗口都有自己的设置，这些设置将允许显示它们的域上的路径分开。

例如，假设我们有一个像www.site.com这样的网站，我们想在它们上显示一些弹出窗口，比如主根路径上的弹出窗口 / 另一个在 /about 上，另一个在 /products 上等等......

我想跟踪特定用户的状态，以在某些时间表上显示他们，例如每次访问的主根弹出窗口，每 7 天的 /about 弹出窗口。

他们建议 cookie 的原因是使用它的过期时间并检查它是否存在以显示所有这些。

例如，如果第一次加载 /about 上的弹出窗口并且设置了一个具有 7 天过期时间的唯一 cookie，我可以在每次用户访问该路由时检查 cookie 标志，如果它仍然存在意味着不显示它。

我想出了一个使用 cookie 的解决方案，但这似乎有点奇怪，因为这个问题的动态部分，如果我想唯一地跟踪它们，我需要创建很多 cookie。

任何帮助表示赞赏。谢谢。

标签： javascriptcookiesbrowserpopuptracking

解决方案

可能最简单的方法是使用基于其他属性的一些可预测的键来创建您的 cookie 名称。例如，路径本身对于 cookie 名称可能就足够了，例如：

const name = `cookie-${path}`

由于路径可能包含特殊字符（如斜杠），您可以用连字符替换它们。请小心，因为 cookie 名称只能有 ASCII，所以如果路径可能是 UTF-8 或其他编码（如非拉丁字符），这可能会很棘手。

或者，您可能只有一个 cookie，其值是包含各种信息的 JSON 字符串：

const state = {
  '/': 5,
  '/about': 10,
  '/products': 11
};

document.cookie = `popups=${JSON.stringify(state)}`;

然后，在需要时，您可以读取 cookie、JSON.parse()值、读取所需的任何内容，如果需要更新，只需更新解析的对象，然后再次存储它。这可能是最简单和最简单的方法，所以我可能会采用它。这仍然可能只支持 ASCII，所以如果您可能有非 ASCII 字符，您也可以采用基本相同的方法，但将其存储在localStorage中。

推荐阅读