2016-04-24 24 views
2

この例では、ユーザにプロンプ​​トで名前を尋ね、Cookieを使用して「Welcome、savedCookie!入力した後、そしてそれらが満了前にページを訪れるたびに。JavaScriptでCookieを設定、読み込み、書き込む

私はブラウザに自分の名前を尋ねるプロンプトを表示し、それからdivに「ようこそ、未定義!」と書きます。私はなぜエラーを受け取るのか分かりません。

//Setting cookie for Users Name 
 
function set_it() { 
 
    var userName = prompt("Please Enter Your Name", ""), 
 
     thetext = "name=" + userName, 
 
     expdate = ";expires=Mon, 27 Mar 2017 13:00:00 UTC", 
 
     newtext = encodeURIComponent(thetext); 
 
    newtext += expdate; 
 
    document.cookie = newtext; 
 
    } 
 
    //Reading & Writing cookie 
 

 
function read_it() { 
 
    var rawCookie = document.cookie; 
 
    bakedCookie = decodeURIComponent(rawCookie); 
 
    yumCookie = bakedCookie.split("="); 
 
    document.getElementById("greeting").innerHTML = "<p>Welcome, " + yumCookie[1] + "!</p>"; 
 

 
} 
 

 
if (document.cookie) { 
 
    read_it(); 
 
} else { 
 
    set_it(); 
 
    read_it(); 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Page Title</title> 
 
</head> 
 

 
<body> 
 
    <div id="greeting"> 
 
    <script src="prjs13_2.js"></script> 
 
    </div> 
 

 
</body> 
 

 
</html>

答えて

0

コンソールであなただけこのコードを実行すると、あなたは

var userName = prompt("Please Enter Your Name", ""), 
     thetext = "name=" + userName, 
     expdate = ";expires=Mon, 27 Mar 2017 13:00:00 UTC", 
     newtext = encodeURIComponent(thetext); 
    newtext += expdate; 
    document.cookie = newtext; 

GET-何を見てみてください、私は「デビッド」名前のためにそれをやったと私はthis-

を得ました

名前%3Ddavid;有効期限= 2017年3月27日13:00:00 UTC「

クッキーを設定しているときに、name属性が無効です。 (encodeURIComponentでなく、また、コンマの代わりに)代わりにこのコードを試してみてください -

var userName = prompt("Please Enter Your Name", ""); 
var thetext = "name=" + userName; 
var expdate = ";expires=Mon, 27 Mar 2017 13:00:00 UTC"; 
var newtext = thetext; 
document.cookie = newtext; 
+1

あなたの返信ありがとう!私はもう少しテストを行いました。ブラウザの設定で、必要な効果をブロックする必要があります。私はフィドルでそれをテストし、それが私がそれをEdgeでテストした後に、それが必要なものを正確に行い、また望ましい効果を得ました。 –

0

あなたが取得/クッキーを設定するには、次の機能を使用することができます。

function setCookie(cname, cvalue, exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires="+d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
} 

function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i = 0; i < ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') { 
      c = c.substring(1); 
     } 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length, c.length); 
     } 
    } 
    return ""; 
} 

function checkCookie() { 
    var user = getCookie("username"); 
    if (user != "") { 
     alert("Welcome again " + user); 
    } else { 
     user = prompt("Please enter your name:", ""); 
     if (user != "" && user != null) { 
      setCookie("username", user, 365); 
     } 
    } 
} 

ここではいくつかのフィドルの例である:fiddle

+1

この質問を投稿する前に回答を検索しながら、私はこの解決策にも出くわしました。しかし、私は本からクラスのためにこれをやっており、この本はそれがこのように行われることを望んでいます。 私はもう少しテストを行いました。ブラウザの設定によって、必要な効果がブロックされている必要があります。私はフィドルでそれをテストし、それが私がそれをEdgeでテストした後に、それが必要なものを正確に行い、また望ましい効果を得ました。あなたの返事をありがとう!とても有難い! –

関連する問題