JavaScript學習筆記031-本地儲存0jsonp
摘要：
Author：Mr.柳上原
付出不亞於任何的努力
願我們所有的努力，都不會被生活辜負
不忘初心，方得始終
能把愛好和工作結合起來
是一件幸福的事情
經過這麼多年的挫折
還好現在找到了
前端
...
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>