cookie

前言：快面试了，才发现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") + "\n密码：" + 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")

posted @ 2016-12-06 11:35 晨落梦公子阅读(138) 评论(0) 编辑收藏举报

晨落梦公子

cookie

公告