用JS实现cookie识别回访者

Implementing cookies with JS to recognize returning visitors

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

现在的问题是同一个用户必须在每个 post 上输入他们的电子邮件。我如何实施 cookie,以便:

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

--

我使用 cookie 的经验很少。谢谢!

客户端上的 Cookie 不会为您提供您寻求的保护,因为任何拥有浏览器的人都可以自己插入这些 Cookie。此外 - 服务器端内容(文章)的客户端安全性本质上是行不通的。任何聪明的用户都能够绕过服务器上没有的任何形式的安全措施。

就是说,如果您完全同意没有为 "unlock" 您的站点安装特定扩展程序或 运行 特定脚本的用户 - 您可以按照以下方式执行操作:

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();
    })
})

Fiddle: here.

编辑:但正如本杰明在他的回答中提到的,这并不是真正的安全机制——除非您只是想验证 an email 而不是 particular email.

前端创建JS cookie很简单:

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

创建一个名为 "email" 的 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 安全。