How can I write JavaScript cookies to keep the data persistent after page reloads on my form?_问答_开发者

I am trying to learn how to write cookies to keep the data in my CookieButton1 button persistent and to survive refreshes and page reloads. How can I do this in JavaScript? I have supplied my source code. Any advise, links or tutorials will be very helpful. If you navigate to [http://iqlusion.net/test.html][1] and click on Empty1, it will start to ask you questions. When finished it stores everything into CookieButton1. But when I refresh my browser the data resets and goes away.

Thanks!

<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?"开发者_Python百科,"");
      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>

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

You aren't setting the cookie here. You are attempting to change the button element with the name CookieButton1 of the form with the name CookieTest to a String value "CookieButton1". This would have shown a JavaScript error in the average webbrowser.

To set a real cookie, you need document.cookie. You can find a little tutorial at w3schools.

document.cookie = "CookieButton1";

All that is doing is setting a cookie without a value, only a name. Cookies are defined as a 'name=value' pairing.

It should look like this ( or equivalent ) document.cookie = 'cookieID=CookieButton1';

Setting document.cookie = will NOT overwrite existing cookies, simply append information to the established cookie.

If you wanted to delete all cookies set by YOUR domain you can always use the following script

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
    }
}

If you need to remove cookies individually, the removeCookie function you have will suffice, but only if it is in a name=value pairing. Else your cookie is unusable since it will contain no data just a name.

Your cookie value works as far as saving the data yes, however once you click refresh the can1set variable is set back to the value of false so the browser is seeing it as null when it runs the checkCookie() function. In my chat program im currently working on I had a simular issue until I set a variable in my checkCookie() function to check against. That way i wasn't always checking against a false value and returning null to my if statement.

like so...

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();
    }
  }
}