如何在JavaScript頁面上重新加載頁面後保持數據持久性？

我正在努力學習如何編寫cookie以保持CookieButton1按鈕中的數據持久性並保持刷新和頁面重新加載。我怎樣才能在JavaScript中做到這一點？我提供了我的源代碼。任何建議，鏈接或教程將非常有幫助。如果您導航到[http://iqlusion.net/test.html][1]並點擊Empty1，它會開始問你問題。完成後，它將所有內容存儲到CookieButton1中。但是，當我刷新我的瀏覽器數據重置並消失。如何在JavaScript頁面上重新加載頁面後保持數據持久性？

謝謝！

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

來源

2010-06-08 Johhny Thero

你有任何服務器端代碼的語言？ – 2010-06-08 22:23:46

現在不行。我在其他項目上使用.php腳本。我搜索谷歌JavaScript的cookie，並找到多個工作的例子。問題是我無法將它們集成到此代碼中。我迄今爲止所做的一切似乎都行不通。 – 2010-06-08 22:32:52

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

你是不是在這裏設置cookie。您試圖將名稱爲CookieTest的名稱爲CookieButton1的按鈕元素更改爲字符串值"CookieButton1"。這會在平均瀏覽器中顯示JavaScript錯誤。

要設置一個真正的cookie，你需要document.cookie。你可以在w3schools找到一個小教程。

來源

2010-06-08 22:34:43 BalusC

看看你現在提供的兩個鏈接。感謝您提醒我注意。 – 2010-06-08 22:39:25

我檢查了您提供的鏈接。我遵循教程，仍然無法爲我的表單寫入Cookie。我寫了三個函數function setCookie，函數getCookie和函數checkCookie（）。我還更新了上面的源代碼輸出。不知道我做錯了什麼。 – 2010-06-08 23:15:34

document.cookie =「CookieButton1」;

所做的就是設置一個沒有值的cookie，只有一個名字。 Cookie被定義爲'名稱=值'配對。

它應該是這樣的（或等同物）的document.cookie = 'Cookie編號= CookieButton1';

設置了document.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 
    } 
}

如果需要單獨刪除cookies，您有就足夠了removeCookie功能所有Cookie，但只有當它是在名稱=值配對中。否則，您的Cookie不可用，因爲它不包含任何數據只是名稱。

來源

2010-06-09 08:42:23 Akidi

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

來源

2014-03-07 02:33:09 SubZero

如何在JavaScript頁面上重新加載頁面後保持數據持久性？

回答

相關問題