前言：快面试了，才发现cookie这块貌似没涉及到呢(⊙﹏⊙)b，各种查阅网上资料，手写代码，整了一个上午，终于有所建树，特此记下鄙人的粗解。。如有不足，望指正。谢谢
一、纯手动操作cookie html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form> 9 <input type="text" id="username" name="username" placeholder="用户名"> 10 <input type="password" id="password" name="password" placeholder="密码"> 11 <br> 12 <br> 13 <input type="button" onclick="meng.saveCookie()" value="保存cookie"> 14 <input type="button" onclick="meng.deleteCookie()" value="删除cookie"> 15 </form> 16 <br> 17 <textarea name="show" id="show" cols="30" rows="10"></textarea> 18 <script src="main.js"></script> 19 </body> 20 </html>
1 window.meng = window.meng || {}; 2 (function () { 3 4 function saveCookie() { 5 var username = document.getElementById("username").value; 6 var password = document.getElementById("password").value; 7 8 var date = new Date(); 9 date.setTime(date.getTime() + 5000); 10 11 setCookie("userName", username, date.toUTCString(), "", ""); 12 setCookie("password", password, date.toUTCString(), "", ""); 13 showCookie(); 14 } 15 16 function setCookie(name, value, expires, path, domain, secure) { 17 document.cookie = name + "=" + encodeURI(value) + 18 ((expires) ? ";expires=" + expires : "") + 19 ((path) ? ";path=" + path : "") + 20 ((domain) ? ";domain=" + domain : "") + 21 ((secure) ? ";secure=" + secure : ""); 22 } 23 24 function getCookie(cName) { 25 var cookieString = decodeURI(document.cookie); 26 console.log(cookieString); 27 var cookieArray = cookieString.split("; "); 28 console.log(cookieArray); 29 for (var i = 0; i < cookieArray.length; i++) { 30 var cookieNum = cookieArray[i].split("="); 31 var cookieName = cookieNum[0]; 32 var cookieValue = cookieNum[1]; 33 34 if (cookieName == cName) { 35 return cookieValue; 36 } 37 } 38 } 39 40 function showCookie() { 41 var txt = document.getElementById("show"); 42 txt.value = "用户名：" + getCookie("userName") + " 密码：" + getCookie("password"); 43 } 44 45 function deleteCookie() { 46 var date = new Date(); 47 date.setTime(date.getTime() - 1000); 48 setCookie("userName", "", date.toUTCString(), "", "", ""); 49 setCookie("password", "", date.toUTCString(), "", "", ""); 50 showCookie(); 51 } 52 53 meng.saveCookie = saveCookie; 54 meng.deleteCookie = deleteCookie; 55 56 })();
说明，我这里只是代码的演示，如想看基础说明，请查看 http://blog.csdn.net/update_java/article/details/47396811
二、运用jquery"玩弄"cookie
下面是一个记住密码的示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../../base/jquery-3.1.0.js"></script> 7 <script src="../../base/jquery.cookie.js"></script> 8 <script src="../../base/jquery.base64.js"></script> 9 </head> 10 <body> 11 <form> 12 <input type="text" name="username" id="username" placeholder="用户名"> 13 <input type="password" name="password" id="password" placeholder="密码"> 14 <input type="checkbox" name="check" id="isChecked"> 15 <input type="button" onclick="meng.setCookie()" name="save" id="save" value="保存"> 16 </form> 17 <script src="main.js"></script> 18 </body> 19 </html>
1 window.meng = window.meng || {}; 2 (function () { 3 4 function setCookie() { 5 var username = $("#username").val(); 6 var pwd = $("#password").val(); 7 var isChecked = $("[id='isChecked']:checked"); 8 console.log(isChecked); 9 10 if (username && pwd) { 11 if (isChecked && isChecked.length > 0) { 12 $.cookie("username", username); 13 $.cookie("password", $.base64.encode(pwd)); 14 } 15 } else { 16 alert("用户名或密码不能为空"); 17 $("[id='isChecked']").prop({"checked": false}); 18 } 19 20 21 } 22 23 function getCookie() { 24 var username = $.cookie("username"); 25 var pwd = $.cookie("password"); 26 if (username && pwd) { 27 $("[id='isChecked']").prop({"checked": true}); 28 } 29 30 if ($("[id='isChecked']").is(":checked")) { 31 $("#username").val(username); 32 $("#password").val($.base64.decode(pwd)); 33 } 34 } 35 36 meng.setCookie = setCookie; 37 38 function init() { 39 getCookie(); 40 } 41 42 init(); 43 })();
说明，cookie.js 用于可以简单使用cookie（不得不说，jquery真尼玛强大。。）
base64.js 用于密码的加密
对于代码不多说，不懂的可以评论问我。
这里只简单记下我遇到的问题
①、用jquery改变checkbox的选中状态
网上好多都是使用，什么attr,removeAttr了什么的，你们确定这些真的有用？？？，反正我亲测没用（当然不排除浏览器的原因）。
解决此问题最好的方法是用 prop
②、js jquery判断checkbox是否被选中的区别
js:document.getElementById("idName").checked
jquery:$("#idName").is(":checked")