フォームのエレメントの値をクッキーに保存して、リロードしたときに設定する。しかも自動？

Javascript

下のものを新しくした。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="application/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>TEST</title>

<style type="text/css">

</style>
</head>

<body>
<form action="#">
<p>
<input type="text" name="aa">
<input type="text" name="bb">
<input type="text" name="cc">
</p>
</form>

<script type="text/javascript">

// name で指定された Input要素の状態を、cookieを利用して維持する。
// select の multiple には、未対応。
//@cc_on

var FormElementsKeeper = function ( keepDay /*, target0 [, target1, ..] */ ) {


  var setCookie = function ( name, value, day, path, domain ) {
    var d = new Date;
    d.setDate( d.getDate() + day );
    return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +
      '; ' + 'expires=' + d.toUTCString( ) +
      '; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) +
      (domain ? 'domain=' + encodeURI ( domain ) + '; ': '' );
  };

  
  var getCookie = function ( name ) {
    name = encodeURIComponent( name ).replace( /([.*()]) /g, '\\$1' );
    var v = document.cookie.match( RegExp( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) );
    return v ? decodeURIComponent( v[1] ): null;
  };


  var setState =  function ( inpName, value ) {
    var d = document;
    var counter = 0;
    var elements = d.getElementsByName( inpName ) || [ d.getElementById( inpName ) ];
    var e;
    
    while( e = elements[ counter++ ] ) {

      switch( e.type ) {

        case 'hidden' : case 'submit': case 'text':  
        case 'button' : case 'reset' : case 'textarea':
          e.value = value;
          break;

        case 'checkbox': case'radio':
          e.checked = e.value == value;
          break;

        case 'select-one': // valueは必須
          var cnt = 0, o;

          while( o = e.options[ cnt++ ] )
            if( o.value == value ) o.selected = true;
          break;

        default:
      }
    }
  };
  
  
  var getState = function ( inpName ) {
    var d = document;
    var counter = 0;
    var elements = d.getElementsByName( inpName ) || [ d.getElementById( inpName ) ];
    var e;
    
    while( e = elements[ counter++ ] ) {
      switch( e.type ) {

        case 'hidden' : case 'submit': case 'text':  
        case 'button' : case 'reset' : case 'textarea':
          return e.value;
          break;

        case 'checkbox': case'radio':
          if( e.checked ) return e.value;
          break;

        case 'select-one': // case 'select-multiple':
          var cnt = 0, o;

          while( o = e.options[ cnt++ ] )
            if( o.selected ) return e.value;
          break;

        default:
      }
    }
    return null;
  };


  var listener = function ( evt ) {
    var e  = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
    var name = e.name || e.id;
      
    name && setCookie( name, getState( name ), keepDay );
  };


  var appendHandler = function ( name ) {
    var d = document;
    var counter = 0;
    var elements = d.getElementsByName( name ) || [ d.getElementById( name ) ];
    var e;
    
    while( e = elements[ counter++ ] ) {
      e./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
        'change', listener, false);
      e./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
        'unload', listener, false);
    }
  };


  var counter = 1;
  var val;
  var inpName; //argumentで、指定された要素の名前
  
  while( inpName = arguments[ counter++ ] ) {
    val = getCookie( inpName ); //cookieに存在？
    
    if( null === val )
      val = getState( inpName ); //formの設定値の読み込み
    else
      setState( inpName, val ); //formに値をセットする
    
    setCookie( inpName, val, keepDay ); //cookieに保存
    appendHandler( inpName ); //onchangeのイベント設定
  }
};



FormElementsKeeper( 10, 'aa', 'bb' );
FormElementsKeeper( 10, 'cc' );
</script>
</body>
</html>

こっちは古いほう

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="application/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<style type="text/css">

</style>
</head>
<body>
<input type="text" name="aa">

<script type="text/javascript">
//@cc_on
// name で指定された Input要素の状態を、cookieを利用して維持する。
// select の multiple には、未対応。
var FormElementsKeeper = function ( ) {
  this.initializer.apply( this, arguments );
};

FormElementsKeeper.prototype.initializer = function ( keepDay /*, target0 [, target1, ..] */ ) {
  
  this.keepDay = keepDay; //cookieの保存期間

  var counter = 1;
  var val;
  var inpName; //argumentで、指定された要素の名前
  
  while( inpName = arguments[ counter++ ] ) {
    val = this.getCookie( inpName ); //cookieに存在？
    
    if( null === val )
      val = this.getState( inpName ); //formの設定値の読み込み
    else
      this.setState( inpName, val ); //formに値をセットする
    
    this.setCookie( inpName, val, keepDay ); //cookieに保存
    
    this.appendHandler( inpName ); //onchangeのイベント設定
  }
};


FormElementsKeeper.prototype.getCookie = function ( name ) {
  name = encodeURIComponent( name ).replace( /([.*()]) /g, '\\$1' );
  var v = document.cookie.match( RegExp( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) );
  return v ? decodeURIComponent( v[1] ): null;
};



FormElementsKeeper.prototype.setCookie = function ( name, value, day, path, domain ) {
  var d = new Date;
  d.setDate( d.getDate() + day );
  return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +
    '; ' + 'expires=' + d.toUTCString( ) +
    '; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) +
    (domain ? 'domain=' + encodeURI ( domain ) + '; ': '' );
};


FormElementsKeeper.prototype.setState = function ( inpName, value ) {
  var d = document;
  var counter = 0;
  var elements = d.getElementsByName( inpName ) || [ d.getElementById( inpName ) ];
  var e;
  
  while( e = elements[ counter++ ] ) {

    switch( e.type ) {

      case 'hidden' : case 'submit': case 'text':  
      case 'button' : case 'reset' : case 'textarea':
        e.value = value;
        break;

      case 'checkbox': case'radio':
        e.checked = e.value == value;
        break;

      case 'select-one': // valueは必須
        var cnt = 0, o;

        while( o = e.options[ cnt++ ] )
          if( o.value == value ) o.selected = true;
        break;

      default:
    }
  }
};


FormElementsKeeper.prototype.getState = function ( inpName ) {
  var d = document;
  var counter = 0;
  var elements = d.getElementsByName( inpName ) || [ d.getElementById( inpName ) ];
  var e;
  
  while( e = elements[ counter++ ] ) {
    switch( e.type ) {

      case 'hidden' : case 'submit': case 'text':  
      case 'button' : case 'reset' : case 'textarea':
        return e.value;
        break;

      case 'checkbox': case'radio':
        if( e.checked ) return e.value;
        break;

      case 'select-one': // case 'select-multiple':
        var cnt = 0, o;

        while( o = e.options[ cnt++ ] )
          if( o.selected ) return e.value;
        break;

      default:
    }
  }
  return null;
};

FormElementsKeeper.prototype.appendHandler = function ( name ) {
  var d = document;
  var counter = 0;
  var elements = d.getElementsByName( name ) || [ d.getElementById( name ) ];
  var e;
  
  while( e = elements[ counter++ ] ) {
    e./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
      'change', (function ( that, _e ) {
          _e./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
            'unload', arguments.callee, false);

          return function ( evt ) {
            var e  = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
            var name = e.name || e.id;
            
            if( name )
              that.setCookie( name, that.getState( name ), that.keepDay );
          };
        })( this, e ), false );
  }
};


new FormElementsKeeper( 10, 'aa' );
</script>
</body>
</html>