appendChild()添加元素后,刷新又没了

没错,我就是 2020-05-23 02:09:50
开了虚拟服务器,运行是正常的,能够看到添加进去的li,但是刷新页面后,又没了,原因应该是没有保存到页面中,请问该怎么保存?
代码如下:

var count = 0;
const gets = function () {
ajax({
url: "http://localhost:8080/index_get",
//请求类型
//data: "index",
type: "get",
//无请求参数
dataType: "json"//返回值类型,基本返回的类型都是json
}).then(function (result) {
//获取5次优惠码
if (count <= 4) {
index = Math.floor(Math.random() * 5000);
//测试功能用的数组,最终调用数据库
var //随机选取数组中的任意一个
str = result[index],
//创建一个空的li
li = document.createElement("li");
console.log(index);
console.log(result);
//给li添加内容
li.innerHTML = `
<img src="./img/Coupon.jpg" alt="优惠码"/>
<p class="copy-pp">${str.code}</p>
<button type="button" class="copy-btn js-copy-btn">复制</button>
<textarea class="copy-text" readonly="readonly"></textarea>
`;
//将li添加至ul内,每次添加在末尾
document.querySelector("ul").appendChild(li);
////调用数组后,从数组中删除
//result.splice(index, 1);可删除
//点击一次,加一次
count++;
}//else是从第5次点击开始算
if (count >= 5) {
var btn = document.getElementById("btn");
btn.style.background = "linear-gradient(to right, rgba(211,211,211), rgba(211,211,211))";
btn.onclick = null;
}
})

};

效果图如下:
...全文
1006 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
没错,我就是 2020-05-23
  • 打赏
  • 举报
回复
还有一个问题,想把str.code返回传到data中,该怎么写?
没错,我就是 2020-05-23
  • 打赏
  • 举报
回复
引用 5 楼 天际的海浪 的回复:
一般情况是把要保存的数据用ajax提交到服务器上的数据库中保存。
在页面重新打开后再用ajax从服务器读取数据,并重新在页面上用appendChild()添加元素。

也可以用 localStorage 在用户浏览器中保存数据,不过这样当用户换电脑或换用别的浏览器,保存的数据就没有了。

那我现在就是要添加到当前的hrml里,实现这个功能,不会因为刷新而失效,我该如何实现呢?
天际的海浪 2020-05-23
  • 打赏
  • 举报
回复
一般情况是把要保存的数据用ajax提交到服务器上的数据库中保存。 在页面重新打开后再用ajax从服务器读取数据,并重新在页面上用appendChild()添加元素。 也可以用 localStorage 在用户浏览器中保存数据,不过这样当用户换电脑或换用别的浏览器,保存的数据就没有了。
没错,我就是 2020-05-23
  • 打赏
  • 举报
回复
引用 1 楼 Let dreams fly 的回复:
可以吧获取到的数据先存在客户端缓存里面,页面加载的时候先从缓存读取
fragment吗?我试过,问题是在页面刷新后,添加进去li又没了,没有保存到html页面中
Let dreams fly 2020-05-23
  • 打赏
  • 举报
回复
可以吧获取到的数据先存在客户端缓存里面,页面加载的时候先从缓存读取

87,909

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧