How can I write javaScript cookies to keep the data persistent after page reloads on my form?
- by Johhny Thero
Hello,
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 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" >
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.CookieTest.CookieButton1 = "CookieButton1";
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>
