本文實例講述了js使用cookie實現記住用戶名功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>www.survivalescaperooms.com cookie記住用戶名</title><meta name="description" content=""><meta name="keywords" content=""></head><body> <script> //1、cookie的使用：document.cookie = 'key=value';可以同時設置多個 // document.cookie="username=longzhoufeng"http:// document.cookie="age=03"http://2、cookie的過期時間：document.cookie = '名稱=值;expires=' + 字符串格式的時間;// var myDate=new Date()// myDate.setDate(myDate.getDate()+3)// document.cookie="mynameis="+encodeURI("longzhoufeng")+ ";expires="+myDate.toGMTString();// document.cookie="age=30"http:// console.log(decodeURI(document.cookie))// 解碼后輸出結果如下：//mynameis=longzhoufeng; age=30//3、把上面的封裝成一個函數,其中有三個參數是在變化的，key值，value值，T時間function setCookie(key,value,t){ var myDate=new Date() myDate.setDate(myDate.getDate()+t) document.cookie=key+"="+value+ ";expires="+myDate.toGMTString();}function getCookie(key){ var arr1 = document.cookie.split('; '); for (var i=0; i<arr1.length; i++) { var arr2 = arr1[i].split('='); if ( arr2[0] == key ) { return decodeURI(arr2[1]); } }}function removeCookie(key) { setCookie(key, '', -1);}// setCookie("myName","longzhoufeng",1)// console.log(getCookie("myName"))// console.log(removeCookie("myName"))// alert(typeof myDate)// 必須將時間格式轉換成字符形式// alert(typeof myDate.toGMTString());//4、內容最好編碼存放,encodeURI//alert( encodeURI('你好') );//alert( decodeURI('%E4%BD%A0%E5%A5%BD') ) </script> <script>window.onload = function() { var oUsername = document.getElementById('username'); var oLogin = document.getElementById('login'); var oDel = document.getElementById('del'); if ( getCookie('username') ) { oUsername.value = getCookie('username'); } oLogin.onclick = function() { alert('登陸成功'); setCookie('username', oUsername.value, 5); } oDel.onclick = function() { removeCookie('username'); oUsername.value = ''; }} </script> <input type="text" id="username" /> <input type="button" value="登陸" id="login" /> <input type="button" value="刪除" id="del" /></body></html>更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
