寫Asp.Net時，我們常會使用到Cookie來儲存簡單的資料，
有時候會需要在JavaScript中能操作Asp.Net所寫入的Cookie，要怎麼做呢？ 我們來看一個簡單的範例。 繼上一篇 "JavaScript存取Cookie範例，寫個CookieHelper吧" ， 有些觀念性的東西，不論在哪種程式語言都是一樣的，就不再重覆說明， 不過在JavaScript(Client端程式)與Asp.Net(Server端程式)中， 比較不一樣的是：
 我們直接來看Code，假設您也有一個這樣的CookieHelper..
public class CookieHelper
{
public static void Set(String cookieName, String cookieValue)
{
HttpCookie item = new HttpCookie(cookieName, HttpUtility.UrlEncodeUnicode(cookieValue));
HttpContext.Current.Response.Cookies.Add(item);
}
public static String Get(String cookieName )
{
HttpCookie item = HttpContext.Current.Request.Cookies[cookieName];
if( item == null )
return null;
else
return HttpUtility.UrlDecode(item.Value);
}
public static void Delete(String cookieName)
{
if( CookieHelper.Get(cookieName) != null )
{
HttpCookie item = new HttpCookie(cookieName);
item.Expires = DateTime.Now.AddDays(-1);
HttpContext.Current.Response.Cookies.Add(item);
}
}
}
接下來，弄個測試頁吧
這邊Random開了一個檔案，名為CookieAndJS.aspx，直接來看Code吧..CookieAndJS.aspx..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CookieAndJS.aspx.cs" Inherits="CookieAndJS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>測試Asp.Net與JavaScript的Cookie互通</title>
<style type="text/css">
.Aspx { color: Blue; width:360px; border:#eeeeee 1px dotted; }
.JS { color: Green;width:360px; border:#eeeeee 1px dotted; }
</style>
<script type="text/javascript" src="Cookie.js"></script>
<script type="text/javascript" src="CookieAndJS.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:540px;padding:5px 0 5px 0">
<div>目前Cookie：<input type="text" id="TB_ShowCookie_JS" class="JS" />(By JS)</div>
<div>目前Cookie：<asp:TextBox ID="TB_ShowCookie_AspNet" runat="server" CssClass="Aspx" />(By Asp.net)</div>
<div style="text-align:center">
<input type="button" value="重新導向回本頁(JS)" onclick="location.href=location.href;" />
<asp:Button ID="BtnRedirectToPage" runat="server" Text="重新導向回本頁(Asp.Net)" onclick="BtnRedirectToPage_Click" />
</div>
<div style="margin:10px">
<fieldset>
<legend>JavaScript Methods</legend>
Name<input type="text" id="TB_Insert_JS_Name" /> Value<input type="text" id="TB_Insert_JS_Value" /> <input type="button" id="BtnInsertByJS" value="插入Cookie" onclick="OnClick_InsertByJS();" /><br />
<div id="Div_Insert_JS_Result" class="JS"></div>
Name<input type="text" id="TB_Select_JS_Name" /><input type="button" id="BtnSelectByJS" value="取得Cookie" onclick="OnClick_SelectByJS();" /><br />
<div id="Div_Select_JS_Result" class="JS"></div>
Name<input type="text" id="TB_Delete_JS_Name" /><input type="button" id="BtnDeleteByJS" value="刪除Cookie" onclick="OnClick_DeleteByJS();" /><br />
<div id="Div_Delete_JS_Result" class="JS"></div>
</fieldset>
</div>
<div style="margin:10px">
<fieldset>
<legend>Asp.Net Methods</legend>
Name<asp:TextBox ID="TB_Insert_AspNet_Name" runat="server" /> Value<asp:TextBox ID="TB_Insert_AspNet_Value" runat="server" /> <asp:Button ID="BtnInsertByAspNet" runat="server" Text="插入cookie" onclick="BtnInsertByAspNet_Click" /><br />
<div id="Div_Insert_AspNet_Result" class="Aspx" runat="server"></div>
Name<asp:TextBox ID="TB_Select_AspNet_Name" runat="server" /><asp:Button ID="BtnSelectByAspNet" runat="server" Text="取得cookie" onclick="BtnSelectByAspNet_Click" /><br />
<div id="Div_Select_AspNet_Result" class="Aspx" runat="server"></div>
Name<asp:TextBox ID="TB_Delete_AspNet_Name" runat="server" /><asp:Button ID="BtnDeleteByAspNet" runat="server" Text="刪除cookie" onclick="BtnDeleteByAspNet_Click" /><br />
<div id="Div_Delete_AspNet_Result" class="Aspx" runat="server"></div>
</fieldset>
</div>
<blockquote>
每個UTF-8字串為4 byte，Cookie最多可以儲存4096 byte(4KB)，約為1024個字。<br />
<br />
每個網域則能儲存20組Cookie。<br />
現今瀏覽器大部份約能儲存300個Cookie (每個瀏覽器不一定)<br />
<br />
關於Unicode及UTF-8的詳細資訊，<a href="http://en.wikipedia.org/wiki/UTF-8" target="_blank">可以參考這邊。</a><br />
</blockquote>
</div>
</form>
</body>
</html>
再來是CodeFile.. CookieAndJS.aspx.cs
using System;
using System.Collections.Generic;
using System.Web;
public partial class CookieAndJS : System.Web.UI.Page
{
protected void Page_LoadComplete(object sender, EventArgs e)
{
//因為Response.Cookies是一個Collection
//要讓它跟JS取得的格式相同必需將它的值組合起來
HttpCookie CookieItem;
List<String> CookieList = new List<String>();
for( Int32 index = 0; index < Request.Cookies.Count ; index++ )
{
CookieItem = Request.Cookies[index];
//Asp.net會自動加入一個SessionId的Cookie, 為了跟Js顯示的相同, 不顯示它
if( CookieItem.Name == "ASP.NET_SessionId" ) continue;
CookieList.Add
(
String.Format("{0}={1}",
HttpUtility.HtmlEncode(CookieItem.Name),
HttpUtility.HtmlEncode(CookieItem.Value))
);
}
TB_ShowCookie_AspNet.Text = String.Join("; ", CookieList.ToArray());
}
//插入Cookie
protected void BtnInsertByAspNet_Click(object sender, EventArgs e)
{
CookieHelper.Set(TB_Insert_AspNet_Name.Text, TB_Insert_AspNet_Value.Text);
Div_Insert_AspNet_Result.InnerText = "設定：" + TB_Insert_AspNet_Name.Text + "=" + TB_Insert_AspNet_Value.Text;
}
//取得Cookie
protected void BtnSelectByAspNet_Click(object sender, EventArgs e)
{
String GetResult = CookieHelper.Get(TB_Select_AspNet_Name.Text);
if(GetResult == null)
Div_Select_AspNet_Result.InnerText = "取得：" + TB_Select_AspNet_Name.Text + "=未設定的Cookie";
else
Div_Select_AspNet_Result.InnerText = "取得：" + TB_Select_AspNet_Name.Text + "=" + GetResult;
}
//刪除Cookie
protected void BtnDeleteByAspNet_Click(object sender, EventArgs e)
{
CookieHelper.Delete(TB_Delete_AspNet_Name.Text);
Div_Delete_AspNet_Result.InnerText = "刪除：" + TB_Delete_AspNet_Name.Text;
}
//轉跳回本頁
protected void BtnRedirectToPage_Click(object sender, EventArgs e)
{
Response.Redirect(Request.Path);
}
}
測試頁面中都是很簡單的語法，直接看就可以囉， 在Html的部份可以看到Random有引入2個JavaScript檔， 第一個js檔就是先前使用過的 "JavaScript CookieHelper"， 第二個js檔就是這個頁面JavaScript的Click事件...等Code， 結語＆重點分析
在Asp.Net中，要讓Cookie與JavaScript互通，其實要注意的就是"路徑"與"網域"的問題，只要兩邊是相同的，就可以互通了， 還有另一個需注意的是編碼的問題，Random的做法是.. 在Asp.Net中操作Cookie時， 使用 HttpUtility.UrlEncodeUnicode() 函式將欲寫入的值編碼 使用 HttpUtility.UrlDecode() 函式將取得的值解編碼 在JavaScript操作Cookie時， 使用 escape() 函式將欲寫入的值編碼， 使用 unescape() 函式將取得的值解編碼， 如此就能達成Cookie在Asp.Net與JavaScript之間互通囉，Enjoy 
2009-08-25 02:57:00 By RazgrizHsu
1581 Visits
|
文章分類 Category關於站長 About
大家來噗浪 Plurk武林高手連結 Links免責聲明 Disclaimer
|
