用JS實現cookie來識別返回的訪問者

Question

我有一個鎖定內容的博客。用戶需要將他們的電子郵件地址輸入表單才能看到完整的內容。

現在的問題是，同一用戶必須在每個帖子上輸入他們的電子郵件。如何實現cookies來：在窗體上

1）提交，用戶上一個博客頁面加載一個cookie 2），檢查是否cookie的存在，如果是這樣，加載完整的內容

-

我使用cookies的經驗極少。謝謝！

Answer 1

在前端創建JS餅乾很簡單：「foo@bar.com」

document.cookie="email=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安全。

Answer 2

客戶端上的Cookie不會爲您提供所需的保護，因爲任何使用瀏覽器的人都可以自行插入這些Cookie。此外，服務器端內容（文章）的客戶端安全性本質上不起作用。任何聰明的用戶將能夠克服不在服務器上的任何形式的安全措施。

這就是說，如果你與用戶完全確定誰不安裝特定的延伸或運行特定的腳本來「解鎖」你的網站 - 你可以做線沿線的東西：

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

當用戶輸入他們的電子郵件：

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

Answer 3

你也許可以使用這個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(); 
    }) 
}) 

小提琴：here。

編輯：但本傑明在他的回答中提到，這是不是一個真正的安全機制 - 除非你只是想驗證的電子郵件而是一個特定電子郵件。