From f1c953c197fb45d5458446b46ea4a19464ef21d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E6=82=A6=E8=BF=8E?=
 <12071374+guo-yueying@user.noreply.gitee.com>
Date: Fri, 29 Dec 2023 04:48:40 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 郭悦迎 <12071374+guo-yueying@user.noreply.gitee.com>
---
 ...54\345\234\260\345\255\230\345\202\250.md" | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 "39 \351\203\255\346\202\246\350\277\216/20231129 \346\234\254\345\234\260\345\255\230\345\202\250.md"

diff --git "a/39 \351\203\255\346\202\246\350\277\216/20231129 \346\234\254\345\234\260\345\255\230\345\202\250.md" "b/39 \351\203\255\346\202\246\350\277\216/20231129 \346\234\254\345\234\260\345\255\230\345\202\250.md"
new file mode 100644
index 0000000..6674de6
--- /dev/null
+++ "b/39 \351\203\255\346\202\246\350\277\216/20231129 \346\234\254\345\234\260\345\255\230\345\202\250.md"	
@@ -0,0 +1,115 @@
+## 复习笔记
+
+1. 清空整个 localStorage
+
+   <mark>localStorage.clear()</mark>
+
+2. 本地存储只能存放字符串，复杂的数据要先转换成字符串，再存入
+
+   <mark>JSON.stringify(复杂数据)</mark>
+
+3. 从本地取复杂数据转成的字符串，不能直接用，要重新还原回对象
+
+   <mark>JSON.PARSE(字符串)</mark>
+
+4. 数组的常用操作方法，一种是用遍历数据，有返回值；另一种是用指定的字符串，拼接数组元素
+
+5. 如果用变量做属性名，只能用 [ ] 括号
+
+6. 本地储存
+
+   <font color = 'red'>增</font>               localStorage.setItem()
+
+   <font color = 'red'>获取</font>            localStorage.getItem()
+
+   <font color = 'red'>删</font>                localStorage.remove()
+
+   <font color = 'red'>查，同增</font>     localStorage.setItem()
+
+------
+
+## 作业
+
+```html
+    <script>
+    // 因为我们的数组其实是要从本地存储取的，而且我们录入的时候，约定了存储的名称是stuData
+    const data =  localStorage.getItem('stuData')  // 我们不能保证第一次取值一定有，也就是可能为null,有值就是字符串
+    // 录入，删除，渲染要共用一个数组，根据data的值来创建数组
+    const arr = data? JSON.parse(data):[];  // 如果是空对象，就说明是第一次创建，给个空数组
+    // tbody对象，渲染表格的父元素
+    const tbody = document.querySelector('tbody')
+    // 渲染
+    function render() {
+    const newArr = arr.map(function(item,i){
+        // 将数组里的学生对象的数组，转换成带有html的表格数据
+        return `
+        <tr>
+            <td>${item.stuId}</td>
+            <td>${item.uname}</td>
+            <td>${item.age}</td>
+            <td>${item.gender}</td>
+            <td>${item.salary}</td>
+            <td>${item.city}</td>
+            <td>
+                <a href="javascript:" data-id=${i}>删除</a>
+            </td>
+        </tr>;  
+        `
+       })   
+    // console.log(newArr);     
+    //  tbody.appendChild(子节点)
+    // 将newArr拼接成字符串
+    tbody.innerHTML = newArr.join('');     
+    }
+    // 调用一次
+    render()
+    // 录入
+    // 表单
+    const info = document.querySelector('.info');
+    // 一次性获取所有要填写的项
+    const items = document.querySelectorAll('[name');   // name属性 伪数组
+    // 表单提交时间
+    info.addEventListener('submit',function(e){
+        // 阻止默认提交
+        e.preventDefault();
+        // 准备一个空对象，用来存放填写的数据
+        const stu = {}
+        // 加入学号
+        stu.stuId = arr.length?arr[arr.length-1].stuId+1:1;
+        // 判断非空
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];  // 每一项，就是要填写的项
+            console.log(item.name); // name  value
+            if (item.value === ''){   
+                // 如果空，就中断执行，提示
+                return alert('有空值')
+            }
+            // 能执行到这里，说明每一项都填写完毕
+            stu[item.name] = item.value
+        }
+        // // 打印一下stu
+        // console.log(stu);
+        // 追加到一个要渲染的数组中
+        arr.push(stu)
+        console.log(arr);
+        // 清空表单
+        this.reset()
+        // 要保存数据到本地存储
+        localStorage.setItem('stuData',JSON.stringify(arr))
+        // 录入之后，渲染一次
+        render()
+    })        
+
+    // 删除
+    tbody.addEventListener('click',function (e) {
+        if(e.target.tagName === 'A'){
+            arr.splice(e.target.dataset.id,1);
+            // 将删除后的数组，重新写入本地存储
+            localStorage.setItem('stuData',JSON.stringify(arr))
+            // 重新渲染
+            render()
+        }        
+    })
+
+    </script>
+```
\ No newline at end of file
-- 
Gitee