用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 安全。
我有一个内容被锁定的博客。用户需要在表格中输入他们的电子邮件地址才能查看完整内容。
现在的问题是同一个用户必须在每个 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 安全。