【问题标题】:How can I detect a new user and redirect if they are new如果他们是新用户,我如何检测新用户并重定向
【发布时间】:2021-09-15 04:54:10
【问题描述】:

我想知道如何使用 html css 和 javascript 来检测用户是否是我的网页的新用户,这意味着这是他们第一次浏览该网站,如果他们是新用户,请将他们重定向到一个 url。如何才能做到这一点?我不确定这是否需要大量代码或相对简单。如果答案需要编写大量代码,也许只是大致说明如何做到这一点?

【问题讨论】:

  • PHP cookie?不知道这是否可以在 JS 中完成
  • 这最好由您的后端服务器 (API) 处理,您可以在其中轻松维护浏览器 cookie。您可以阅读 HTTP cookie 并了解如何在后端最好地实现它们。

标签: javascript html jquery css redirect


【解决方案1】:

您可以创建一个 cookie new_user=1 并在您的代码中检查它,例如“如果 cookie new_user 未设置,则重定向用户”。

【讨论】:

    【解决方案2】:

    您可以使用Window.localStorage

    当用户加载页面时,检查存储中是否存在密钥。如果没有,这是用户第一次访问该站点。然后给键一个值,这样在以后的访问中你就不会再把用户误​​认为是新用户了。

    const isNew = localStorage.getItem("visit") == null;
    if (isNew) {
      localStorage.setItem("visit", ".");
      //It's a new user
    } else {
      //It's not a new user
    }
    

    代码沙盒示例:


    同样的逻辑也可以应用于 cookie。例如,像这样的东西(使用js-cookie 库):

    const hasVisited = Cookies.get("has-visited") == undefined;
    if (hasVisited) {
      Cookies.set("has-visited", "true");
      //It's a new user
    } else {
      //It's not a new user
    }
    

    要重定向,我们可以简单地做location = "url-to-redirect-to.com"

    【讨论】:

    • 值得注意的是,您需要在同一个Origin(协议、域和端口)上才能访问放置在localStorage 中的项目。如果您为您的站点设置子域或使用多种协议(例如在同一地址上拥有一个 FTP 服务器),并且您想检查他们之间的新用户,您将需要另一种解决方案。
    【解决方案3】:

    基本上你想跟踪两种类型的人 -

    1. 新用户
    2. 老用户

    第一种解决方案

    假设一个新用户访问了一个页面,然后在他们的浏览器中设置了一个 cookie,比如 visited,就像在一群人中标记渗漏一样。

    然后检查用户访问您的网站时是否设置了 cookie,如果设置了,则将他视为老羊或新生。

    优点

    不需要服务器

    缺点

    如果标记/cookie 被删除或篡改,那么染色的老羊会被视为新生,这对用户来说很奇怪,也不是一个好的体验。

    方法二

    让你的所有用户注册,然后重定向他们登录。

    为每艘船分配一个唯一的 ID,例如 sheep1sheep2

    然后跟踪他们的进度。喜欢

    sheep1 ---> 8 岁,每天生产 4 升牛奶

    sheep2 ---> 3 岁 & 怀孕

    sheep3 ---> 11 岁,只吃东西,可能会死

    现在

    当用户登录时,然后在 cookie 中设置他们的唯一键

    现在跟踪和平滑用户体验

    当用户访问您的页面时,检查他是否拥有该唯一密钥,如果是,则从服务器验证它,如果无效,则强制他登录。

    现在要求服务器提供有关该唯一键的数据。

    并检查他们的进展并按照您的喜好对待他们 ---

    最后用户对这种处理感到满意,并且您生产了更多牛奶

    【讨论】:

    • 谢谢,我一定会试试的。也感谢您的解释和详细回答!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-24
    • 1970-01-01
    • 1970-01-01
    • 2016-02-20
    • 1970-01-01
    相关资源
    最近更新 更多