Cookie是网页开发中的一项重要技术。用于在本地存储一些信息(如username,password,登录状态)以便用户下一次訪问时使用(或在其他页面使用)。
cookie的格式是键值对,多个键值对之间以分号分隔,如 name=zhangsan;age=21
以下的代码演示内容:当用户点击确认button时,将把姓名和年龄存储在cookie中。当用户下一次訪问该页面时。将自己主动填写姓名和年龄。
注:必须把该html文件部署在webserver(如apache)上才干看到 cookie 的效果。直接放在本地用浏览器打开不行~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>Javascript Cookie应用</title> <head> <style> body {background-color:#e6e6e6} </style> </head> <body onload = "autoFill()"> <p>姓名<input type="text" id = "input_name"><p> <p>年龄<input type="text" id = "input_age"><p> <button onclick = "login()">确认</button> <script> //保存至cookie function login(){ var username = document.getElementById("input_name").value; var age = document.getElementById("input_age").value; setCookie("ProUserName",username,7); setCookie("ProAge",age,7); alert("已保存至cookie."); } //读取cookie,自己主动填写输入框 function autoFill(){ document.getElementById("input_name").value=getCookie("ProUserName") document.getElementById("input_age").value=getCookie("ProAge") } //保存cookie, c_name = value, 有效期为 expiredays 天。 function setCookie(c_name,value,expiredays){ var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) } //读取key为 c_name 的 cookie. function getCookie(c_name){ c_start=document.cookie.indexOf(c_name+"=") if (c_start!=-1){ c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) { c_end=document.cookie.length } return unescape(document.cookie.substring(c_start,c_end)) } return "" } </script> </body> </html>