Author：Mr.柳上原
- 付出不亞於任何的努力
- 願我們所有的努力，都不會被生活辜負
- 不忘初心，方得始終
能把愛好和工作結合起來
是一件幸福的事情
經過這麼多年的挫折
還好現在找到了
前端
我很愛你！
工作
我很愛你！
<meta charset="utf-8">
<!DOCTYPE html> <!-- 文檔類型：標準html文檔 -->
<html lang='en'> <!-- html根標籤 翻譯文字：英文 -->
<head> <!-- 網頁頭部 -->
<meat charset='UTF-8'/> <!-- 網頁字符編碼 -->
<meat name='Keywords' content='關鍵詞1,關鍵詞2'/>
<meat name='Description' content='網站說明'/>
<meat name='Author' content='作者'/>
<title>前端59期學員作業</title> <!-- 網頁標題 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外鏈樣式表 -->
<style type='text/css'> /*內部樣式表*/
</style>
</head>
<body> <!-- 網頁主幹：可視化區域 -->
<script>
/*
本地存儲：
localStorage 永久存儲
sessionStorage 瀏覽器關閉時清空
*/
// localStorage
// 設置localStorage的值
localStorage.setItem("fengyu", "dashuaibi"); // 參數爲key，value，參數只能傳字符串形式
// 本地存儲查找
Application -> Storage
// 本地存儲實例
// 電子記事本
.done{} // 數據的css樣式
// 設計可遍歷的數據結構
[
{
content: "", // 內容
done: false // 狀態
}
]
const ipt = document.getElementById("ipt"); // 輸入表單
const list = document.getElementById("list"); // 輸出備忘欄（<ul>）
const data = localStorage.getItem("todolist"); // 查詢本地存儲
// 判斷是否有值
if (data === null){ // 沒有寫入數據時
localStorage.setItem("todolist", "[]"); // 設置本地存儲的參數
} else { // 有數據時
JSON.parse(data).forEach((v, i, self) => {
list.innerHTML += `<li class=${v.done ? "done" : ""}>${v.content}<span>X</span></li>`
})
}
// 回車添加內容
ipt.onkeydown = function (e){
// 判斷鍵盤的鍵值
if (e.keyCode !== 13) return;
// 回車後獲取輸入的值
const val = this.value.trim();
// 判斷輸入的內容
if (!val) return;
// 添加數據
const data = JSON.parse(localStorage.getItem("todolist")); // 防止數據覆蓋，先取出之前的數據，然後再加上現有寫入的數據
list.inneHTML += `<li>${val}<span>X</span></li>`
// 更新本地存儲
data.push({
content,
done: false
});
// 寫入本地存儲
localStorage.setItem("todolist", JSON.stringify(data));
// 清空輸入框
this.value = "";
}
// 刪除數據事件
list.addEventListener("click", e => {
const that = e.target;
const data = localStorage.getItem("todolist");
e.stopPropagation();
const tagName = that.tagName.toLowerCase();
switch (tagName){
case "span":
data.forEach(function(v, i, self){
if (this === list.children[i]){
list.removeChild(this);
self.splie(i, 1);
}
}, that.parentNode); // forEach回調函數的this指向
break;
case "li":
data.forEach(function(v, i, self){
if (that === list.children[i]){
v.done = !v.done;
that.classlist.toggle("done");
}
})
break;
// 沒有default
}
localStorage.setItem("todolist", JSON.stringify(data));
});
/*
jsonp：
json的一種使用模式
跨域獲取數據的方式
script的src屬性具有跨域請求資源的能力
scr與json配合的模式就是就是jsonp
*/
// src默認get請求
// src裏網站的查詢字段裏輸出cb的值
// 後端拿到cb值，返回相應的值名與數據
src="[http://www.xxx.com?username=fengyu&cb=fy](http://www.baidu.com?username=fengyu&cb=fy)"
cb=fy
const cb = ctx.query.cb; // nodejs後端查詢命名
ctx.type = "text/javascript";
ctx.body = `${cb}({a: "這是後端朋友傳過來的數據"})`;
fy({
JSON: "後端返回的數據"
}) // 格式
// 前端定義一個fy函數，就能取到後端發來的值
function fy(obj){
console.log(obj); // obj = {a: "這是後端朋友傳過來的數據"};
}
// 如果當前端需要觸發某些方法時再拿到數據
document.onclick = function (){ // 點擊事件觸發時創建script標籤進行跨域操作
const script = document.createElement("script");
script.src = "[http://www.xxx.com?username=fengyu&cb=fy](http://www.baidu.com?username=fengyu&cb=fy)";
document.body.appendChild(script);
}
</script>
// script的src屬性
<script src="[http://www.xxx.com?username=fengyu&cb=fy](http://www.baidu.com?username=fengyu&cb=fy)"></script>
</body>
</html>