Margin left, right = 10% (Name:margin, Value:10)
를 선택하고 SUBMIT 단추를 누르면 3가지의 element를 가진 폼의 값이 action에 지정되어 있는 페이지의 URL에
?formName.elementName=formName.elementName.value 를 덧붙여서 갑니다. action이 지정되지 않았다면 기본으로 현재의 페이지의
URL에 덧붙입니다.
그래서 여기서는
http://user.chollian.net/~spacekan/dhtml/examples/cookie/
cook1.htm?size=12&color=green&margin=10
가 location 상자에 들어가고 target를
지정하지 않았기 때문에 현재의 페이지에 재출력 합니다. (위의 url은 한 줄입니다.)
이 때, color, size, margin은 각각이 폼의 element의 이름입니다. 이 이름을 지정하지 않은 element는
submit되지 않습니다.
var xx = self.location.search.substring(1)로 위의 size=12&color=green&margin=10 을 읽습니다.
이 값이 사용자가 입력한 값입니다. 쿠키에 저장하고 필요한 때에 읽습니다.
아래는 전체소스입니다.
<![CDATA[
--------------------------------------------------------
function setCookie(name, value, expire) {
document.cookie = name + "=" + escape(value)
+ ( (expire) ? ";expires=" + expire.toGMTString() : "")
}
function getCookie(uName) {
var flag = document.cookie.indexOf(uName+'=');
if (flag != -1) {
flag += uName.length + 1
end = document.cookie.indexOf(';', flag)
if (end == -1) end = document.cookie.length
return unescape(document.cookie.substring(flag, end))
}
}
function register(cssSet) {
var today = new Date()
var expire = new Date(today.getTime() + 60*60*24*31*1000)
setCookie("userCSS", cssSet, expire)
}
function getValue(X, Y) {
var flag = X.indexOf(Y+"=")
if(flag != -1) {
flag += Y.length + 1
end = X.indexOf('&', flag)
if (end == -1) end = X.length
if (Y == "color") return X.substring(flag, end)
return X.substring(flag, end)-0
}
}
function cssWrite(css) { //css : size=13&color=green&margin=10
if(css.indexOf("size=") != -1) var size = getValue(css, "size");
if(css.indexOf("color=") != -1) var color = getValue(css, "color");
if(css.indexOf("margin=") != -1) var margin = getValue(css, "margin");
var cssLayout = ""
+ "<style> "
+ "BODY { font-size:" + size + "pt; color:" + color
+ "; margin-left:" + margin + "%; margin-right:" + margin + "%; }"
+ " </style>"
document.write(cssLayout);
setSize = size //폼의 선택단추와 막대를 선택 해준다.
setColor = color
setMargin = margin
}
function setForm() {
if ( !(self.setSize && self.setColor && self.setMargin) ) return
var FO = document.fo
for (var i=0; i < FO.size.length; i++) { //set size radio
if (FO.size[i].value == setSize) {
FO.size[i].checked = true
break
}
}
for (i=0; i<FO.margin.length; i++) { //set margin radio
if (FO.margin[i].value == setMargin) {
FO.margin[i].checked = true
break
}
}
for (i=0; i<FO.color.length; i++) { //set color select
if (FO.color[i].value == setColor) {
FO.color[i].selected = true
break
}
}
}
function cookieCss() {
var userCSS = getCookie("userCSS");
if ( userCSS ) cssWrite(userCSS)
else alert("\n처음 오셨군요.. 반갑습니다..\n\n원하는 페이지 구성을 선택하세요..");
}
var xx = self.location.search.substring(1)
if (xx) register(xx);
cookieCss()
</script>
</head>
<body onLoad="setForm()">
<h2>Cookie set for CSS style</h2>
<form name=fo>
<INPUT TYPE="RADIO" NAME="size" VALUE="10" checked> : Font Size 10<br>
<INPUT TYPE="RADIO" NAME="size" VALUE="12"> : Font Size 12<br>
<INPUT TYPE="RADIO" NAME="size" VALUE="14"> : Font Size 14<br>
<INPUT TYPE="RADIO" NAME="size" VALUE="16"> : Font Size 16<br>
<p>
<SELECT name=color>
<OPTION value="red">red
<OPTION value="black" SELECTED>black
<OPTION value="aqua">aqua
<OPTION value="green">green
<OPTION value="blue">blue
<OPTION value="yellow">yellow
<OPTION value="white">white
</SELECT> Select Font Color
<p>
<INPUT TYPE="RADIO" NAME="margin" VALUE="1" checked> : Margin left, right = 1%<br>
<INPUT TYPE="RADIO" NAME="margin" VALUE="10"> : Margin left, right = 10%<br>
<INPUT TYPE="RADIO" NAME="margin" VALUE="20"> : Margin left, right = 20%<br>
<INPUT TYPE="RADIO" NAME="margin" VALUE="30"> : Margin left, right = 30%<br>
<p>
<input type=submit>
</form>
--------------------------------------------------------
]]>
여기서도 상위의 쿠키값으로 <style>택을 사용합니다. 그래서 글자의 색이 상위와 같습니다.
상위의 쿠키값을 상속 받습니다. 이것을 하는 소스는 아래입니다.
<![CDATA[
--------------------------------------------------------
<script language="JavaScript">
function getCookie(uName) {
var flag = document.cookie.indexOf(uName+'=');
if (flag != -1) {
flag += uName.length + 1
end = document.cookie.indexOf(';', flag)
if (end == -1) end = document.cookie.length
return unescape(document.cookie.substring(flag, end))
}
}
function getValue(X, Y) {
var flag = X.indexOf(Y+"=")
if(flag != -1) {
flag += Y.length + 1
end = X.indexOf('&', flag)
if (end == -1) end = X.length
if (Y == "color") return X.substring(flag, end)
return X.substring(flag, end)-0
}
}
function cssWrite(css) { //css : size=13&color=green&margin=10
if(css.indexOf("size=") != -1) var size = getValue(css, "size");
if(css.indexOf("color=") != -1) var color = getValue(css, "color");
if(css.indexOf("margin=") != -1) var margin = getValue(css, "margin");
var cssLayout = ""
+ "<style> "
+ "BODY { font-size:" + size + "pt; color:" + color
+ "; margin-left:" + margin + "%; margin-right:" + margin + "%; }"
+ " </style>"
document.write(cssLayout);
}
function cookieCss() {
var userCSS = getCookie("userCSS");
if ( userCSS ) cssWrite(userCSS)
}
cookieCss()
</script>
</head>
<body>
--------------------------------------------------------
]]>
Return