Главная Обзор Помощь
Вход
lovecoding
/
W260426
8
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

admin

fengchuanyu 1 неделя назад
Родитель
a89293cf4c
Сommit
afd8ccf052
3 измененных файлов с 124 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 62 0
      6_HTML5/6_H5本地存储.html
  2. 27 0
      6_HTML5/7_历史管理hash.html
  3. 35 0
      6_HTML5/8_历史管理history.html

+ 62 - 0
6_HTML5/6_H5本地存储.html
Просмотреть файл 

@@ -0,0 +1,62 @@
 
+<!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
 
+        // 这两种存储方法 空间为5MB及以上
 
+        // localStorage 本地存储，永久存储
 
+        // sessionStorage 会话存储，关闭浏览器后数据丢失
 
+
 
+        // localStorage sessionStorage 与 cookie 区别
 
+        // cookie 在本地存储，会携带到服务器端
 
+        // localStorage sessionStorage 是在客户端存储的，不会携带到服务器端
 
+        // cookie 可以设置过期时间，localStorage sessionStorage 不能设置过期时间
 
+        // 存储大小 cookie 4KB，localStorage sessionStorage 5MB及以上
 
+
 
+        // 操作方法 
+        // localStorage.setItem() 存储数据
 
+        // localStorage.getItem() 获取数据
 
+        // localStorage.removeItem() 删除数据
 
+        // localStorage.clear() 清空所有数据
 
+        // sessionStorage.setItem() 存储数据
 
+        // sessionStorage.getItem() 获取数据
 
+        // sessionStorage.removeItem() 删除数据
 
+        // sessionStorage.clear() 清空所有数据
 
+
 
+
 
+        // 存储数据
 
+        localStorage.setItem("name","张三");
 
+        localStorage.setItem("age","18");
 
+
 
+        // 获取数据
 
+        console.log(localStorage.getItem("age"));
 
+
 
+        // 删除数据
 
+        // localStorage.removeItem("age");
 
+
 
+        // 清空数据
 
+        localStorage.clear();
 
+
 
+        // 会话存储 sessionStorage
 
+        sessionStorage.setItem("name","张三");
 
+        sessionStorage.setItem("age","18");
 
+        // 获取数据
 
+        console.log(sessionStorage.getItem("age"));
 
+        // 删除数据
 
+        // sessionStorage.removeItem("age");
 
+        // 清空数据
 
+        // sessionStorage.clear();
 
+
 
+
 
+
 
+        
+
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 27 - 0
6_HTML5/7_历史管理hash.html
Просмотреть файл 

@@ -0,0 +1,27 @@
 
+<!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>
 
+    <!-- hash -->
 
+    <button id="btn">点击我</button>
 
+    <script>
 
+        // 获取元素
 
+        var btn = document.getElementById("btn");
 
+        // 绑定事件
 
+        btn.onclick = function(){
 
+            // 点击按钮后，改变hash值
 
+            var ran = Math.random();
 
+            location.hash = "#"+ran;
 
+        }
 
+
 
+        // 监听hash值变化 onhashchange
 
+        window.onhashchange = function(){
 
+            console.log(location.hash);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 35 - 0
6_HTML5/8_历史管理history.html
Просмотреть файл 

@@ -0,0 +1,35 @@
 
+<!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>
 
+    <!-- 历史管理 history -->
 
+    <button id="btn">点击我</button>
 
+    <script>
 
+        // 获取元素
 
+        var btn = document.getElementById("btn");
 
+        // 绑定事件
 
+        btn.onclick = function () {
 
+            // 点击按钮后，改变历史记录
 
+            // history中通过pushState方法添加历史记录
 
+            // pushState 有三个值 第一个参数是添加的值 第二个参数是标题(不能省略一帮为空字符串) 第三个参数是url
 
+            //    history.pushState(val,title,url);
 
+            var ran = Math.random();
 
+            history.pushState(ran,"");
 
+        }
 
+        // 监听历史记录变化 onpopstate
 
+        window.onpopstate = function () {
 
+            console.log(history.state);
 
+        }
 
+
 
+        // history 与 hash 区别
 
+        // history不会改变url，hash会改变url
 
+    </script>
 
+</body>
 
+
 
+</html>