admin

6-HTML5/8_cookie.html

@@ -22,8 +22,12 @@
         // document.cookie = "name=张三;expires="+ now.toUTCString();
 
         // 读取cookie
-        console.log(document.cookie)
+        // console.log(document.cookie)
 
+        // cookie 与 localStorage、sessionStorage 对比
+        // cookie 可以设置过期时间  localStorage、sessionStorage 不可以
+        // cookie 可存储大小为4k localStorage、sessionStorage为5M
+        // cookie 可以随着http请求一起发送到服务器端  localStorage、sessionStorage 不可以
 
     </script>
 </body>

6-HTML5/练习3_cookie.html

@@ -9,25 +9,48 @@
     <script>
         // 设置cookie
         function setCookie(key,value,timer){
-
+            // 设置key 和 value
+            var keyVal = key + "=" + value;
+            // 设置过期时间
+            var now = new Date();
+            now.setDate(now.getDate() + timer);
+            var timerStr = ";expires=" + now.toUTCString();
+            // 设置cookie
+            document.cookie = keyVal + timerStr;
         }
 
         // 获取cookie
         function getCookie(key){
+            // 获取所有cookie
+            var thisCookie = document.cookie;
+            // 拆分cookie
+            var cookieArr = thisCookie.split(";");
+            // 遍历cookie
+            for(var i=0;i<cookieArr.length;i++){
+                var cookieKey= cookieArr[i].split("=");
+                // trim()去除字符串左右空格
+                // console.log(cookieKey[0].trim());
+                if(cookieKey[0].trim() == key){
+                    return cookieKey[1]
+                }
+            }
 
         }
 
         // 删除cookie
         function delCookie(key){
-
+            // 设置cookie 过期时间为-1
+            setCookie(key,'',-1);
         }
 
         // 设置一个cookie name=张三 过期时间为10天后
         setCookie('name','张三',10);
+        setCookie('age',18,10);
+        setCookie('sex','男',10);
         // 获取cookie
-        console.log(getCookie('name'));
+        console.log(getCookie('sex'));
         // 删除cookie
-        delCookie('name');
+        delCookie('sex');
     </script>
 </body>
 </html>