fengchuanyu 3 months ago
parent
commit
fe3539e143
3 changed files with 101 additions and 0 deletions
  1. 39 0
      9_HTML5/6_本地化存储.html
  2. 28 0
      9_HTML5/7_cookie.html
  3. 34 0
      9_HTML5/练习1_画板.html

+ 39 - 0
9_HTML5/6_本地化存储.html

@@ -0,0 +1,39 @@
+<!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
+
+        // let obj = {name:'zhangsan',age:18};
+        // localStorage.setItem('username','zhangsan');
+        // localStorage.setItem('age',18);
+
+        // let username = localStorage.getItem("username");
+        // console.log(username);
+
+        // obj = JSON.stringify(obj);
+        // localStorage.setItem("user",obj);
+        // let user = localStorage.getItem("user");
+        // user = JSON.parse(user);
+        // console.log(user);
+
+        // localStorage.removeItem("user");
+        // localStorage.clear();
+
+        // sessionStorage.setItem("username","zhangsan");
+        
+        // sessionStorage localStorage的区别
+        // localStorage是永久存储,除非手动删除
+        // sessionStorage是临时存储,页面关闭就删除(会话级)
+        // sessionStorage localStorage的特性
+        // localStorage和sessionStorage只能存储字符串类型,不能存储对象
+        // localStorage和sessionStorage 存储的数据没有时间限制 内容大小为5M左右
+    </script>
+</body>
+</html>

+ 28 - 0
9_HTML5/7_cookie.html

@@ -0,0 +1,28 @@
+<!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
+        let timer = new Date();
+        timer.setDate(timer.getDate()+3);
+        document.cookie = "username=zhangsan;expires="+timer.toUTCString();
+        document.cookie = "age=18;expires="+timer.toUTCString();
+        document.cookie = "sex=man;expires="+timer.toUTCString();
+        //获取cookie
+        console.log(document.cookie);
+        // 删除cookie
+        timer.setDate(timer.getDate()-10);
+        document.cookie = "username=;expires="+timer.toUTCString();
+    
+        // 实现以下方法
+        setCookie("username","zhangsan",3);//设置cookie 三个参数 第一个是cookie名 第二个是cookie值 第三个是过期时间
+        getCookie("username");//获取cookie
+        removeCookie("username");//删除cookie
+    </script>
+</body>
+</html>

+ 34 - 0
9_HTML5/练习1_画板.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #can{
+            background-color: #000;
+            /* margin-left: 300px; */
+        }
+
+    </style>
+</head>
+<body>
+    <canvas id="can" width="400" height="400"></canvas>
+    <script>
+        var can = document.querySelector('#can');
+        var ctx = can.getContext('2d');
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 3;
+        can.onmousedown = function(e){
+            ctx.moveTo(e.offsetX,e.offsetY);
+            can.onmousemove = function(e){
+                ctx.lineTo(e.offsetX,e.offsetY);
+                ctx.stroke();
+            }
+        }
+        document.documentElement.onmouseup = function(){
+            can.onmousemove = null;
+        }
+    </script>
+</body>
+</html>