Startsida Utforska Hjälp
Logga in
lovecoding
/
W250913
10
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

admin

fengchuanyu 6 timmar sedan
förälder
2e424f7a3f
incheckning
ead37454dc
2 ändrade filer med 75 tillägg och 0 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 31 0
      4_BOM&DOM/8_历史管理hash.html
  2. 44 0
      6_HTML5/7_本地存储.html

+ 31 - 0
4_BOM&DOM/8_历史管理hash.html
Visa fil 

@@ -0,0 +1,31 @@
 
+<!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>
 
+    <button>按钮</button>
 
+    <script>
 
+        var oBtn = document.querySelector("button");
 
+        var num = 1;
 
+        oBtn.onclick = function(){
 
+            // window.location是BOM对象下的 地址对象 可以获取当前页面的地址信息
 
+            // hash 是地址栏中 # 后面的内容
 
+            num++;
 
+            // 向hash添加内容 添加历史记录
 
+            window.location.hash = "code"+num;
 
+        }
 
+
 
+        // 捕捉历史记录变化事件
 
+        // 当hash值发生变化时 会触发hashchange事件
 
+        window.onhashchange = function(){
 
+            // console.log("历史记录变化了");
 
+            // 可以获取当前hash值
 
+            var hash = window.location.hash;
 
+            console.log(hash);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
6_HTML5/7_本地存储.html
Visa fil 

@@ -0,0 +1,44 @@
 
+<!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 会话存储 会话结束后会自动删除
 
+        // localStorage sessionStorage 使用场景
 
+        // localStorage 存储用户偏好
 
+        // sessionStorage 存储用户登录信息 用户名 密码 手机号 邮箱 等
 
+        // 存储数据
 
+        localStorage.setItem("username","张三");
 
+        sessionStorage.setItem("userphone","13800000000");
 
+        // 获取数据
 
+        var username = localStorage.getItem("username");
 
+        console.log(username);
 
+        var userphone = sessionStorage.getItem("userphone");
 
+        console.log(userphone);
 
+        // 删除数据 可以删除指定的数据
 
+        // localStorage.removeItem("username");
 
+        // sessionStorage.removeItem("userphone");
 
+        // 清空数据 一次性全部清空
 
+        // localStorage.clear();
 
+        // sessionStorage.clear();
 
+
 
+
 
+        // 注意事项
 
+        // localStorage sessionStorage 只能存储字符串类型的数据
 
+        // localStorage sessionStorage 与 cookie 区别
 
+        // localStorage sessionStorage 存储数据大小 5MB 及以上
 
+        // cookie 存储数据大小 4KB 左右
 
+        // cookie 会自动过期 可以设置过期时间 过期后会自动删除
 
+        // localStorage 没有过期时期 除非手动删除 否则会一直存在
 
+        // sessionStorage 会话存储 会话结束后会自动删除 比如关闭浏览器数据就消失
 
+        // cookie 会随着请求发送到服务器 可以用于存储用户登录信息
 
+        // localStorage sessionStorage 不会随着请求发送到服务器
 
+    </script>
 
+</body>
 
+</html>