使用 JS 实现 cookie 以识别回访者

Implementing cookies with JS to recognize returning visitors

本文关键字：识别 JS 实现 cookie 使用      更新时间：2023-09-26

我有一个内容锁定的博客。用户需要在表单中输入其电子邮件地址才能查看完整内容。

现在的问题是同一个用户必须在每个帖子上输入他们的电子邮件。如何实施 Cookie，以便：

1）在表单提交时，用户会得到一个cookie2）在博客页面加载时，检查cookie是否存在，如果存在，则加载完整内容

--

我使用饼干的经验很少。谢谢！

在前端创建 JS cookie 很简单：

document.cookie="email=foo@bar.com";

它会创建一个名为"电子邮件"的 cookie，其内容为"foo@bar.com"。

当用户再次访问您的网站时，您可以检查 Cookie 是否存在。

if (document.cookie.indexOf("email")>=0) {
    // Log them in!
}
else {
    // Show log-in field!
}

您可能还希望 Cookie 在一段时间后过期。创建 Cookie 时，您可以设置到期日期：

document.cookie="email=foo@bar.com;expire=06/12/2015";

但是，这不如使用服务器方 cookie 安全。

客户端上的 Cookie 不会为您提供您所寻求的保护，因为任何拥有浏览器的人都可以自己插入这些 Cookie。此外 - 服务器端内容（文章）的客户端安全性本质上不起作用。任何聪明的用户都可以克服不在服务器上的任何形式的安全措施。

也就是说，如果您对不安装特定扩展或运行特定脚本来"解锁"您的网站的用户完全没问题 - 您可以执行以下操作：

if(document.cookie.indexOf("entered_email=true") === -1){
     // show email request field
} else {
     // show content
}

当用户输入其电子邮件时：

document.cookie += (document.cookie ? ";" : "") + "entered_email=true";

您可能可以使用 localStorage 对象来实现此目的：

HTML：

<input type="text" id="email"/>
<input type="button" id="submit" value="submit"/>

JS：

$(document).ready(function(){
    if (localStorage.getItem("email")){
        $("#email").val(localStorage.getItem("email"))
        // unlockContent();
        // otherStuff();
    }
    $("#submit").click(function(){
        localStorage.setItem("email", $("#email").val());
        alert("Saved: " + localStorage.getItem("email"));
        // unlockContent();
        // otherStuff();
    })
})

小提琴：这里。

编辑：但正如本杰明在他的回答中提到的，这不是一个真正的安全机制 - 除非你只是想验证电子邮件而不是特定的电子邮件。

相关文章：