웹페이지가 저장되거나, 북마크되거나 사용자가 다른 페이지로 항해해 갈 때 원래(persisted)의 엘레멘트에서 발생한다.


이벤트 속성
object.onsave=handler JScript 만-
object.onsave=GetRef("handler") VBScript 5.0-
명명된 스크립트 <SCRIPT for=object event=onsave> Explorer-
이벤트 특성
Bubbles 없음
취소 가능
발생 원인
  • 웹페이지를 저장할 때
  • 웹페이지를 북마크(Bookmark)할 때
  • 다른 페이지로 항해해 갈때
디폴트 작용 이 스크립트와 연관된 작용을 시작한다.

srcElement 이벤트가 발생한 개체를 반환하거나 설정한다.
적용
개체scriptHTMLIE

onsave로 즐겨찾기에 저장되고 onload 이벤트처리자로 문서로 로딩된다. setAttribute 메서드로 다른 개체들을 포함아여 입력 개체와 그 값을 즐겨찾기에 유지를 설정한다. 값이 유지되기 위해서는 클라스로 지정된 class="saveFavorite"이어야 한다.

<BUTTON
  onclick="window.open('../behavior/exp/wsaveFavorate.html','_new','width=500,height=300,menubar=yes')">예제 보조창 열기
</BUTTON>
exp/wsaveFavorate.html 코드
<!DOCTYPE html public "-//w3c//dtd html 4//en">
<HTML>
<HEAD>
<TITLE>언어 참조 - Javascript - 비헤비어(behavior) - saveFavorite 예제</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<LINK rel="stylesheet" type="text/css" href="../../public/jscript.css">
<META name="save" content="saveFavorite">
<STYLE>.favoriteClass {behavior:url(#default#saveFavorite);}</STYLE>
<SCRIPT>
function dosaveFavorite(){
  if (formName.oPersistText.value==''){
    alert('입력필드에 문자열을 입력하라.');
  } else formName.oPersistText.setAttribute('sPersistText',formName.oPersistText.value);
}
function doLoadsaveFavorite(){
  formName.oPersistText.value=formName.oPersistText.getAttribute('sPersistText');
}
</SCRIPT></HEAD>

<BODY>
<TABLE width=500>
<TR><TD>
<DIV style="border:solid 1 blue;background:fff;text-align:center;width:100%;margin:5">
<H3><SPAN class=titleblue><SPAN class=behavior>saveFavorite</SPAN> 예제</SPAN></H3>
</DIV>
<SPAN class=gray><SCRIPT>document.write(document.location)</SCRIPT></SPAN><BR><BR>
<FORM name="formName">
정보 입력 1: <INPUT type="text" id="oPersistText" class="favoriteClass"
  onsave="dosaveFavorite()" onload="doLoadsaveFavorite()">(유지된다.)<BR>
정보 입력 2: <INPUT type="text" id="oPersistNone">(유지되지 않는다.)
</FORM><BR>
<P align=center style="background:ffa;padding:10">
입력하고 즐겨찾기에 추가한 후, 즐겨찾기에서 호출하여 보라.</P><BR>
<TABLE cellpadding=8 align=center style="border:solid 1 blue">
<TR><TD align=center><BUTTON onClick="self.close()">현재 보조창 닫기</BUTTON></TD></TR>
</TABLE>
</TD></TR></TABLE>
</BODY>
</HTML>

saveHistory 예제

<BUTTON onclick="window.open('../behavior/exp/wsaveHistory.html','_new','width=500,height=300')">예제 보조창 열기</BUTTON>
exp/wsaveHistory.html 코드
<!DOCTYPE html public "-//w3c//dtd html 4//en">
<HTML>
<HEAD>
<TITLE>언어 참조 - Javascript - 비헤비어(behavior) - saveHistory 예제</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<LINK rel="stylesheet" type="text/css" href="../../public/jscript.css">
<META name="save" content="history">
<STYLE>.sHistory {behavior:url(#default#saveHistory);}</STYLE>
<SCRIPT>
function doSave(){
  message='입력하고 진행하라.';
  if (oPersistForm.oPersistText.value) document.location='../../public/blank.html';
  else {
    alert(message);
    oPersistForm.oPersistText.focus();
    return false;
  }
}
</SCRIPT>
</HEAD>

<BODY>
<TABLE width=500>
<TR><TD>
<DIV style="border:solid 1 blue;background:fff;text-align:center;width:100%;margin:5">
<H3><SPAN class=titleblue><SPAN class=behavior>saveHistory</SPAN> 예제</SPAN></H3>
</DIV>
<SPAN class=gray><SCRIPT>document.write(document.location)</SCRIPT></SPAN><BR><BR>
<FORM name="oPersistForm">
정보 입력 1: <INPUT type=text id="oPersistText" class=sHistory>(유지된다.)<BR>
정보 입력 2: <INPUT type=text id="oPersistNone">(유지되지 않는다.)
</FORM><BR>

<P align=center style="background:ffa;padding:10">입력한 후  
<BUTTON onClick="doSave()"
  style="background:aff;padding:1;font-size:.9em"><B>여기를 클릭</B></BUTTON>하고 다시 돌아와 보라.</P><BR>

<TABLE cellpadding=8 align=center style="border:solid 1 blue">
<TR><TD align=center><BUTTON onClick="self.close()">현재 보조창 닫기</BUTTON></TD></TR>
</TABLE>
</TD></TR></TABLE>

</BODY>
</HTML>
../../public/blank.html 코드
<!DOCTYPE html public "-//w3c//dtd html 4//en">
<HTML>
<HEAD>
<TITLE>빈 페이지</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-KR">
<LINK rel="stylesheet" type="text/css" href="../public/jscript.css">
</HEAD>

<BODY>
<CENTER>
<BR><BR><BR>
<H3>빈 페이지</H3><BR><BR>
<A href="Javascript:history.go(-1)"><IMG src="../../gif/arbackv.gif" border=0 alt="이전 페이지로"></A>
<A href="Javascript:history.back()">이전 페이지로</A>
<BR><BR><BR>
<SPAN class=mini><SPAN class=teal>이 페이지는 <SCRIPT>document.write(document.location)</SCRIPT> 임</SPAN></SPAN>
</CENTER>

</BODY>
</HTML>