Question

我正在尝试学习如何编写cookie以使我的CookieButton1按钮中的数据保持不变并保持刷新和页面重新加载。我怎样才能在JavaScript中执行此操作？我提供了我的源代码。任何建议，链接或教程都会非常有用。如果您导航到[http://iqlusion.net/test.html][1]并单击Empty1，它将开始向您提问。完成后，它将所有内容存储到CookieButton1中。但是当我刷新浏览器时，数据会重置并消失。

谢谢！

<html>
<head>
<title>no_cookies>
</head>

<script type="text/javascript" >

    function setCookie(c_name,value,expiredays)

{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

    function getCookie(c_name)

{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}

    function checkCookie()

{
CookieButton1=getCookie('CookieButton1');
if (CookieButton1!=null && CookieButton1!="")
  {
  alert('Welcome again '+CookieButton1+'!');
  }
else
  {

  if (CookieButton1!=null && CookieButton1!="")
    {
    setCookie('CookieButton1',CookieButton1,365);
    }
  }
}

var Can1Set = "false";

function Can1()
{
   if (Can1Set == "false")
   {
      Can1Title = prompt("What do you want to name this new canned response?","");
      Can1State = prompt("Enter a ticket state (open or closed)","closed");
      Can1Response = prompt("Enter the canned response:","");
      Can1Points = prompt("What point percentage do you want to assign? (0-10)","2.5");

      // Set the "Empty 1" button text to the new name the user specified
      document.CookieTest.CookieButton1.value = Can1Title;

      // Set the cookie here, and then set the Can1Set variable to true
      document.cookie = "CookieButton1"; 
      alert(document.cookie); 

      Can1Set = true;
   }else{
      document.TestForm.TestStateDropDownBox.value = Can1State;
      document.TestForm.TestPointsDropDownBox.value = Can1Points;
      document.TestForm.TestTextArea.value = Can1Response;

      // document.TestForm.submit();

   }
}
</script>

<form name=TestForm>
State: <select name=TestStateDropDownBox>
<option value=new selected>New</option>
<option value=open selected>Open</option>
<option value=closed>Closed</option>

</select>

Points: <select name=TestPointsDropDownBox>
<option value=1>1</option>
<option value=1.5>1.5</option>
<option value=2>2</option>
<option value=2.5>2.5</option>
<option value=3>3</option>
<option value=3.5>3.5</option>
<option value=4>4</option>
<option value=4.5>4.5</option>
<option value=5>5</option>
<option value=5.5>5.5</option>
<option value=6>6</option>
<option value=6.5>6.5</option>
<option value=7>7</option>
<option value=7.5>7.5</option>
<option value=8>8</option>
<option value=8.5>8.5</option>
<option value=9>9</option>
<option value=9.5>9.5</option>
<option value=10>10</option>
</select>
<p>

Ticket information:<br>
<textarea name=TestTextArea cols=50 rows=7></textarea>
</form>

<form name=CookieTest>

<input type=button name=CookieButton1 value="Empty 1" onClick="javascript:Can1()">

</form>

Answer 1

// Set the cookie here, and then set the Can1Set variable to true
document.CookieTest.CookieButton1 = "CookieButton1";

您没有在此处设置Cookie。您正在尝试将名称为CookieButton1的名称为CookieTest的按钮元素更改为字符串值"CookieButton1"。这将在平均webbrowser中显示JavaScript错误。

要设置真实的Cookie，您需要document.cookie。你可以在w3schools找到一个小教程。

Answer 2

document.cookie =“CookieButton1”;

所有这一切都是设置一个没有值的cookie，只是一个名字。 Cookie被定义为'name = value'配对。

应该看起来像这样（或等价物） document.cookie ='cookieID = CookieButton1';

设置document.cookie =不会覆盖现有的cookie，只需将信息附加到已建立的cookie。

如果您想删除您的域设置的所有Cookie，您可以随时使用以下脚本

function delCookie() {
    var new_date = new Date()
    new_date = new_date.toGMTString()
    var thecookie = document.cookie.split(";")
    for (var i = 0; i < thecookie.length; i++) {
        document.cookie = thecookie[i] + "; expires =" + new_date
    }
}

如果您需要单独删除Cookie，则您拥有的removeCookie功能就足够了，但前提是它在名称=值配对中。否则你的cookie无法使用，因为它不包含任何数据名称。

Answer 3

您的Cookie值与保存数据一样有效，但是一旦您点击刷新，can1set变量就会重新设置为false的值，以便浏览器将其视为null当它运行checkCookie()函数时。在我目前正在处理的聊天程序中，我遇到了类似问题，直到我在checkCookie()函数中设置变量进行检查。这样我并不总是检查false值并将null返回到我的if语句。

像这样......

function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
  {
    //if username is NOT null and is not blank asigns it to idname
  document.getElementById("idname").innerHTML= document.getElementById("idname").innerHTML +=  username;
  }
else 
  {
     //if username IS null or blank prompt  user to enter name
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,1);
    }
  else
    {
     //if user submits a null or blank value close browser
    byebye();
    }
  }
}

如何在页面重新加载到表单后编写JavaScript cookie以保持数据的持久性？

3 个答案: