1.实现动态刷新思路
- 通过比较
"滚动条高度"：parseInt(document.documentElement.scrollTop)
"浏览器实际高度"：document.documentElement.clientHeight
"实际内容高度"：document.documentElement.scrollHeight
的关系，从而实现动态刷新。
2 localstorage本地存储
- 注意：需要创建一个数组，实现存储数据，每次获取本地存储的资源时，需要将获取的资源先存入数组中，然后再将新的数据插入数组末尾，遍历渲染后，将新的数据重新存入本地存储中，方便下次调用数据。
3 fecth的使用
- 两个方法：response.text()方法与response.json()方法，分别处理字符串与json的数据。
- get的方法：
function getApi() {
fetch("be.json")
.then(res => res.json())
.then(res => {
console.log(res);
})
}
function getApi() {
fetch("url", { //请求的地址
//body:{name:"jack",age:18}
body: "name=jack&age=18", //请求的数据
method: "POST", //请求头类型
headers: { //请求头信息
'Content-Type': 'application/x-www-form-urlencoded' //采用的URL编码
//'Content-Type':'application/json'//采用的URL编码 body为json格式
}
}).then(res => res.text())
.then(res => console.log(res))
.catch(err => console.log(err))
}
4 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
padding: 15px;
border-bottom: 1px solid red;
}
h4 {
color: red;
}
p:first-child {
width: 100%;
height: 30px;
background: red;
line-height: 30px;
}
p:last-child {
width: 100%;
height: 30px;
background: green;
line-height: 30px;
}
</style>
</head>
<!-- https://www.520mg.com/mi/list.php?page= -->
<body>
<h1>段子</h1>
<button onclick="dellocal()">删除浏览记录</button>
<div class="list"></div>
<script>
var count = 1;
var page = 1;
var temp = []; //存入段子数据
var list = document.querySelector(".list");
var url = "https://www.520mg.com/mi/list.php?page=";
function dellocal() {
localStorage.removeItem("obj");
localStorage.removeItem("page");
}
//遍历函数
function get_api_succ(res) {
for (let i of res.result) {
var item = document.createElement("div");
item.classList.add("item");
item.innerHTML = i.summary;
var h4 = document.createElement("h4");
h4.innerHTML = `${count}.` + i.title;
list.appendChild(item);
list.insertBefore(h4, item);
count++;
}
}
//判断数据是否存在
var temp_local = JSON.parse(localStorage.getItem("obj"));
// console.log(temp_local)
if (localStorage.getItem("obj") != null) {
//将数据存入数组
for (let i of temp_local.name) {
temp.push(i);
}
//将存储的数据展示
var temp_content = document.createElement("p");
temp_content.innerHTML = "历史段子";
list.appendChild(temp_content);
for (let i of temp) {
get_api_succ(i);
}
var temp_content1 = document.createElement("p");
temp_content1.innerHTML = "新段子";
list.appendChild(temp_content1);
} else {
page = localStorage.getItem("page");
get_api();
}
function get_api() {
fetch(url + page).then(res => res.json()).then(res => {
//通过创建content对象，以name为键，temp为值传入数据
temp.push(res);
var content = new Object(); //创建对象
content.name = temp;
//为数组添加数据
var obj = JSON.stringify(content);
get_api_succ(res);
page++;
localStorage.setItem("page", page);
//将数据存入localStorage
localStorage.setItem("obj", obj);
})
}
window.onscroll = function() {
// console.log("滚动条高度", parseInt(document.documentElement.scrollTop));
// console.log("浏览器实际高度", document.documentElement.clientHeight)
// console.log("实际内容高度", document.documentElement.scrollHeight)
if (document.documentElement.scrollHeight - 1 == (parseInt(document.documentElement.scrollTop) + document.documentElement.clientHeight)) {
console.log("更新内容-------------------------");
page = parseInt(localStorage.getItem("page"));
get_api();
}
}
</script>
</body>
</html>