fengchuanyu 8 月之前
父节点
当前提交
246b9fccef
共有 2 个文件被更改,包括 88 次插入0 次删除
  1. 30 0
      7_HTML5/7_本地化存储.html
  2. 58 0
      7_HTML5/练习题2_cookie.html

+ 30 - 0
7_HTML5/7_本地化存储.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        //localStorage-用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
+        //sessionStorage-用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
+
+        // localStorage 和 sessionStorage  最大存储空间为8M
+
+        // cookie 与 stroage 区别
+        // 1、cookie 可以随着网络传输到服务端 stroage不会随着网络进行传输;
+        // 2、cookie 可以设置过期时间 stroage不可以设置过期时间
+        // 3、cookie仅能存储 4K 内容 stroage可以存储8M
+
+        // localStorage.setItem("username","小红");
+        // localStorage.setItem("password","abc");
+        // console.log(localStorage.getItem("username"));
+        // localStorage.removeItem("password");
+        // localStorage.clear();
+
+        // sessionStorage.setItem("a","1");
+
+    </script>
+</body>
+</html>

+ 58 - 0
7_HTML5/练习题2_cookie.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        // 向本地存储中设置一个新的cookie
+        function setCookie(key,val,time){
+            var timer = new Date();
+            timer.setDate(timer.getDate()+time);
+            console.log(timer.toUTCString());
+            document.cookie = `${key}=${val};Expires=${timer.toUTCString()}`;
+        }
+
+        // 根据key值获取本地cookie
+        function getCookie(key){
+            var cookieVal = document.cookie;
+            cookieVal = cookieVal.split(";")
+            console.log(cookieVal);
+            var valStr = "";
+            for(var i=0;i<cookieVal.length;i++){
+                // console.log(cookieVal[i].split("="))
+                // 将每一个键值对根据“=”进行分割 分别值key值(第一个值) vlaue值(第二个值)
+                var keyStr = cookieVal[i].split("=")[0];
+                valStr = cookieVal[i].split("=")[1]
+                // 去除掉字符串左右两边的空格
+                keyStr = keyStr.trim();
+                if(keyStr == key){
+                    return valStr;
+                }
+                
+            }
+            return valStr
+        }
+
+        // 删除cookie
+        function delCookie(key){
+            var timer = new Date();
+            // 把当前时间设置为过期时间
+            timer.setDate(timer.getDate()-2);
+            document.cookie = `${key}=null;Expires=${timer.toUTCString()}`;
+        }
+        // setCookie("username","小张",3);
+        // setCookie("password","123",3);
+        // setCookie("school","黑大",3);
+
+        // console.log(getCookie("password"));
+        delCookie("username");
+        delCookie("password");
+        
+
+
+    </script>
+</body>
+</html>