jQuery cookie讀取/寫入表單

Question

我一直在使用演示網站，因爲昨天，並在我自己的網站上做了一個版本。

這裏是演示網站： http://rikrikrik.com/jquery/autosave/

這裏是確切的代碼是在我的網站： http://jsfiddle.net/EswfB/1/

問題： 刪除相關的cookie無法正常工作。

它有時有效，有時不起作用。通常只有當我點擊它時纔會起作用，刷新，點擊恢復並再次點擊刪除。

現在，演示網站和我的網站昨天工作完美，關閉我的機器，今天返回，都沒有工作。不要在我的同事機器上工作。

使用Chrome和FF。

任何想法？

單擊刪除相關cookie時，地址欄不會顯示href =「＃」的標誌。同時刪除相關的cookies不做任何事。

Answer 1

我會推薦在JavaScript中使用localStorage，這很容易管理。你會節省很多代碼。 http://jsfiddle.net/EswfB/8/

function save() { 
    var firstname = document.profileForm.First_name.value; 
    var lastname = document.profileForm.Last_name.value; 
    if(document.getElementById("GenderMale").checked) { 
     var gender = "Male"; 
    } 
    else if(document.getElementById("GenderFemale").checked) { 
     var gender = "Female"; 
    } 
    var howdowecontactyou = document.profileForm.How_do_we_contact_you.value; 
    var preferredtimeofcontact = document.profileForm.Preferred_time_of_contact.value; 
    var jobtitle = document.profileForm.Job_title.value; 
    localStorage.setItem("firstname", firstname); 
    localStorage.setItem("lastname", lastname); 
    localStorage.setItem("gender", gender); 
    localStorage.setItem("howdowecontactyou", howdowecontactyou); 
    localStorage.setItem("preferredtimeofcontact", preferredtimeofcontact); 
    localStorage.setItem("jobtitle", jobtitle); 
    document.getElementById("autosave_saving").innerHTML = "Saved!"; 
} 
function load() { 
    var firstname = localStorage.getItem("firstname"); 
    var lastname = localStorage.getItem("lastname"); 
    var gender = localStorage.getItem("gender"); 
    var howdowecontactyou = localStorage.getItem("howdowecontactyou"); 
    var preferredtimeofcontact = localStorage.getItem("preferredtimeofcontact"); 
    var jobtitle = localStorage.getItem("jobtitle"); 
    document.profileForm.First_name.value = firstname; 
    document.profileForm.Last_name.value = lastname; 
    if(gender == "Male") { 
     document.getElementById("GenderMale").checked = true; 
     document.getElementById("GenderFemale").checked = false; 
    } 
    if(gender == "Female") { 
     document.getElementById("GenderMale").checked = false; 
     document.getElementById("GenderFemale").checked = true; 
    } 
    document.profileForm.How_do_we_contact_you.value = howdowecontactyou; 
    document.profileForm.Preferred_time_of_contact.value = preferredtimeofcontact 
    document.profileForm.Job_title.value = jobtitle; 
} 
function deleteStorage() { 
    localStorage.removeItem("firstname"); 
    localStorage.removeItem("lastname"); 
    localStorage.removeItem("gender"); 
    localStorage.removeItem("howdowecontactyou"); 
    localStorage.removeItem("preferredtimeofcontact"); 
    localStorage.removeItem("jobtitle"); 
} 
​ 

和HTML：

<p><button class="autosave" OnClick="save()">Save form</button> <button class="autosave_restore" OnClick="load()">Restore form</button> <input type="RESET" value="Default Form"> <button OnClick="deleteStorage()" class="autosave_removecookies">Delete related cookies</button> <span class="autosave_saving" id="autosave_saving"></span></p> 
<!-- Licensed software, from www.freecontactform.com --> 
<form name="profileForm" accept-charset="utf-8" method="post" action="forms/simple_form/_process.php" onSubmit="return validate.check(this)"> 
<table class="widthOneHundredPercent"> 
<tr> 
<td class="tableCellFloat widthFortyPercent" valign="top"> 
<label for="First_name" class="required">First name<span class="required_star"> * </span></label> 
</td> 
<td class="tableCellFloat" valign="top"> 
<input type="text" name="First_name" id="First_name" maxlength="50" value="" placeholder="First name"/> 
</td> 
</tr> 
<tr> 
<td class="tableCellFloat widthFortyPercent" valign="top"> 
<label for="Last_name" class="required">Last name<span class="required_star"> * </span></label> 
</td> 
<td class="tableCellFloat" valign="top"> 
<input type="text" name="Last_name" id="Last_name" maxlength="50" value="" placeholder="Last name"/> 
</td> 
</tr> 
<tr> 
<td class="tableCellFloat columnOne" valign="top"> 
<label for="Gender">Gender</label></td> 
</td> 
<td class="tableCellFloat columnTwo" valign="top"> 
<input type="radio" name="Gender" value="Male" id="GenderMale" />Male<br /> 
<input type="radio" name="Gender" value="Female" id="GenderFemale" />Female<br /> 
</td> 
</tr> 
<tr> 
<td class="tableCellFloat widthFortyPercent" valign="top"> 
<label for="How_do_we_contact_you?" class="required">How do we contact you?<span class="required_star"> * </span></label> 
</td> 
<td class="tableCellFloat" valign="top"> 
<select class="tableCellFloat" id="How_do_we_contact_you" name="How_do_we_contact_you"> 
<option value="">Please select...</option> 
<option value="Email">Email</option> 
<option value="Phone">Phone</option> 
<option value="Text">Text</option> 
</select> 
</td> 
</tr> 
<tr> 
<td class="tableCellFloat widthFortyPercent" valign="top"> 
<label for="Preferred_time_of_contact">Preferred time of contact?</label> 
</td> 
<td class="tableCellFloat" valign="top"> 
<select class="tableCellFloat" id="Preferred_time_of_contact" name="Preferred_time_of_contact"> 
<option value="">Please select...</option> 
<option value="08:00_-_12:00">08:00 - 12:00</option> 
<option value="12:00_-_17:30">12:00 - 17:30</option> 
<option value="17:30_-_20:00">17:30 - 20:00</option> 
<option value="Anytime">Anytime</option> 
</select> 
</td> 
</tr> 
<tr> 
<td class="tableCellFloat widthFortyPercent" valign="top"> 
<label for="Job_title">Job title</label> 
</td> 
<td class="tableCellFloat" valign="top"> 
<input type="text" name="Job_title" id="Job_title" maxlength="50" value="" placeholder="Job title"/> 
</td> 
</tr> 
</table>  
<div class="clearboth">&nbsp;</div> 
<center><input type="SUBMIT" value="submit"></center> 
</form>​