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

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

您的cookie值可以保存数据，是的，但单击刷新后， can1set变量将被设置回false值，因此浏览器在运行checkCookie()函数时将其视为null 。 在我目前正在工作的聊天程序中，我遇到了类似的问题，直到我在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();
    }
  }
}

Answer 2

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

您没有在此处设置Cookie。 您试图将名称为CookieTest的表单的名称为CookieButton1的按钮元素更改为字符串值"CookieButton1" 。 这本来会在平均Web浏览器中显示JavaScript错误。

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

Answer 3

document.cookie =“ CookieButton1”;

所要做的就是设置一个没有值，只有一个名称的cookie。 Cookie被定义为“名称=值”配对。

它看起来应该像这样（或等效）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，则只有具有name = value配对的removeCookie函数就足够了。 否则您的Cookie无法使用，因为它仅包含名称，将不包含任何数据。

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

问题描述

3 个解决方案

解决方案1
0 2014-03-07 02:33:09

解决方案2
0 2010-06-08 22:34:43

解决方案3
0 2010-06-09 08:42:23

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

问题描述

3 个解决方案

解决方案1 0 2014-03-07 02:33:09

解决方案2 0 2010-06-08 22:34:43

解决方案3 0 2010-06-09 08:42:23

解决方案1
0 2014-03-07 02:33:09

解决方案2
0 2010-06-08 22:34:43

解决方案3
0 2010-06-09 08:42:23