2009年2月4日

cookie

讀取或設定用戶電腦的資訊片(cookie)。其語法是:

document.cookie='key=值[;expires=日期;domain=網址;path=目錄;secure=布林值]';

每一組資訊片的格式是 key=value。key 的字母大小寫不同。value 可以用 encodeURIComponent(), decodeURIComponent() 編碼,尤其是中文需要用此。每一組資訊片之後可以選擇地接以下屬性值,屬性用”;”分開。瀏覽器會將兩組資訊片用”; ”分開。

  1. expires=過期時間。沒有設過期時間,則資訊片會在關閉瀏覽器時自動失效。設了過期時間,資訊片在過期前都有效,即使關閉瀏覽器或關閉電腦都可以讀回資訊片。要消除一個資訊片,可將 expires 設為過去時間。設定的時間要符合 GMT 格式,可用 toUTCString() 設定日期。
  2. path=檔案路徑。只限此檔案路徑及其子路徑,可以存取此資訊片。預設值為本網頁所在目錄。
  3. domain=網路領域。只限此網路領域及其子領域,可以存取此資訊片。預設值為本頁所在的網域。可設定的值為本頁的網域及其主網域。例如本頁為 www.blog.com 則其主網域為 blog.com。
  4. max-age=秒數:資訊片存活時間的秒數。限 Firefox 使用。
  5. secure:如果設為 true,則限用安全的通信規則(https)存取。

雖然資訊片的語法很像字串,但其作法不同;新的資訊片會加入資料結構,而不是取代舊的。每一個網頁可設定的資訊片有限,例如 50 個;超過時,舊的資訊片會被移除,以容納新的。

此頁的範例都是在個人電腦測試,使用 javascript 設定資訊片與讀取資訊片;尤其是 domain, path 沒有詳細測試。如果你有架設網站,可由主機設定資訊片,使用前請多作測試。

cookie 的安全性不夠理想,因此 PHP 語言發展 session 加強之。

  • 程式用法:

    <script type='text/javascript'>
    document.write( document.cookie +'<br />');
    document.cookie='color=red';
    document.cookie='width=120';
    document.write( document.cookie.length 
         +'<br />'+ document.cookie);
    </script>

  • 執行結果:


    20
    color=red; width=120

  • 上面出現很多長串數字,這是部落格系統設定的資訊片。

可以改變資訊片的值

  • 程式用法:

    <script type='text/javascript'>
    document.cookie='color=green';
    document.write( document.cookie );
    </script>

  • 執行結果:

    width=120; color=green

setCookie()

由於設定資訊片的過期時間有點複雜,這裡寫了一個簡單的函式,此函式會組織字串,並且存入資訊片。函式的參數 key, value, domain, path 為字串;expire 是整數,單位為秒,可為負值,會與現在時間相加。expire, domain, path 可不設;expire 設為 0,或 domain, path 設為空字串,其效果與不設相同。

  • 程式用法:

    <script type='text/javascript'>
    function setCookie(key, value, expire, domain, path)
    {
      var ck=key +'='+ encodeURIComponent(value);
      if( expire )
      {
        var epr=new Date();
        epr.setTime(epr.getTime()+ expire*1000 );
        ck+=';expires='+ epr.toUTCString();
      }
      if( domain )
        ck+=';domain='+ domain;
      if( path )
        ck+=';path='+ path;
      document.cookie=ck;
    }
    setCookie('name', '蔡依林', 20);
    document.write( document.cookie );

    </script>

  • 執行結果:

    width=120; color=green; name=%E8%94%A1%E4%BE%9D%E6%9E%97

getCookie()

讀取一個資訊片。參數是 key,資訊片的鍵。沒找到此鍵會傳回 false;找到時,傳回鍵值。

  • 程式用法:

    <script type='text/javascript'>
    function getCookie(key)
    {
     if( document.cookie.length==0 )   return false;
     var i=document.cookie.search(key+'=');
     if( i==-1 )   return false;
     i+=key.length+1;
     var j=document.cookie.indexOf(';', i);
     if( j==-1 )   j=document.cookie.length;
     return document.cookie.slice(i,j);
    }

    document.write( 
      decodeURIComponent( getCookie( 'name') ) );
    </script>

  • 執行結果:

    蔡依林

delCookie()

刪除一個資訊片。參數是 key,資訊片的鍵。

  • 程式用法:

    <script type='text/javascript'>
    function delCookie(key)
    {
      setCookie(key, '', -2000);
    }
    delCookie( 'name' );
    document.write( getCookie('name') );
    </script>

  • 執行結果:

    false


©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。