function deleteComment(id) { var comment = JSON.parse(localStorage.getItem("comment-" + id)); var confirmDelete = confirm("确认要删除评论:" + comment.content + " 吗?"); if (confirmDelete) { localStorage.removeItem("comment-" + id); alert("评论已删除!"); } }有错误吗
时间: 2023-06-03 08:03:24 浏览: 91
?抱歉,我可以回答这个问题。该函数缺少加号连接字符串的操作,正确的写法应该是:
function deleteComment(id) {
var comment = JSON.parse(localStorage.getItem("comment-" + id));
var confirmDelete = confirm("确认要删除评论:" + comment.content + " 吗?");
if (confirmDelete) {
localStorage.removeItem("comment-" + id);
alert("评论已删除!");
}
}
相关问题
怎么优化这段代码export default { data() { return { goodsId: " ", goodsData: [], current: 0, oldScrollTop: 0, scrollTop: 0, searchBgc: " rgba(0, 0, 0, 0.1)", show: false, opacity: 0, flag: true, }; }, mounted() { this.handleScroll(); }, beforeDestroy() { window.removeEventListener("scroll", this.handleScrollFn); //离开当前组件别忘记移除事件监听哦 }, watch: { scrollTop: { handler: function (newValue, oldValue) { clearTimeout(this.timer); this.timer = setTimeout(() => { if (newValue == window.scrollY) { this.oldScrollTop = newValue; if (this.oldScrollTop > 100) { this.show = true; } else { this.show = false; } } else { if (this.oldScrollTop == oldValue) { // console.log("滚动开始"); } } }, 20); }, immediate: true, }, }, methods: { handleScroll() { this.handleScrollFn = () => { this.scrollTop = window.scrollY; }; window.addEventListener("scroll", this.handleScrollFn); }, onClickLeft() { this.$router.go(-1); }, onChange(index) { this.current = index; }, returnFn() { this.$router.go(-1); }, // 加入购物车 joinShopCar() { alert("加入购物车成功"); let shopcarList = JSON.parse(localStorage.getItem("shopcar")) || []; console.log(shopcarList); this.goodsData.num = 1; this.goodsData.isChecked = false; let ind = shopcarList.findIndex((ele) => { return ele.id == this.goodsId; }); console.log(ind); // 如果有相同的返回该数据的下标,没有则返回-1 if (ind != -1) { shopcarList[ind].num++; } else { shopcarList.push(this.goodsData); } localStorage.setItem("shopcar", JSON.stringify(shopcarList)); this.$router.push("/shopcar"); }, // 立即结算 payFn() { localStorage.setItem("goodspay", JSON.stringify(this.goodsData)); this.$router.push("/pay"); }, }, async created() { this.goodsId = this.$route.query.id; try { let { data } = await getGoodsDetailApi(this.goodsId); this.goodsData = data.data.goodsData; console.log(this.goodsData); } catch (err) { console.log(err); } }, };
这段代码可以考虑进行以下优化:
1. 将方法中的注释删除,因为这些注释并没有提供太多有用的信息,反而会干扰代码的阅读。
2. 将所有的变量定义在最上面,以便于阅读和维护。同时,可以将一些不经常使用的变量定义为局部变量,以减少内存的占用。
3. 将一些方法提取出来,封装成单独的函数并放在外部,以提高代码的可复用性和可读性。
4. 为了提高代码的性能,可以将一些异步操作放到 created 钩子函数中,以免影响页面的渲染速度。
5. 对于方法中的一些重复代码,可以进行优化,如将相同部分提取出来,避免重复代码的出现。
6. 对于一些可能产生副作用的操作,如 alert(),应该尽量避免在代码中使用,以免影响用户体验。
下面是优化后的代码:
```
<template>
<!-- 模板代码 -->
</template>
<script>
import { getGoodsDetailApi } from "@/api"; // 导入 api 接口
export default {
data() {
return {
goodsId: " ",
goodsData: [],
current: 0,
oldScrollTop: 0,
scrollTop: 0,
searchBgc: "rgba(0, 0, 0, 0.1)",
show: false,
opacity: 0,
flag: true,
timer: null,
};
},
mounted() {
this.handleScroll();
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScrollFn);
},
watch: {
scrollTop: {
handler: function (newValue, oldValue) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
if (newValue == window.scrollY) {
this.oldScrollTop = newValue;
this.show = this.oldScrollTop > 100;
} else {
if (this.oldScrollTop == oldValue) {
// 滚动开始
}
}
}, 20);
},
immediate: true,
},
},
methods: {
// 监听滚动事件
handleScroll() {
this.handleScrollFn = () => {
this.scrollTop = window.scrollY;
};
window.addEventListener("scroll", this.handleScrollFn);
},
// 返回上一页
onClickLeft() {
this.$router.go(-1);
},
// 切换商品详情页
onChange(index) {
this.current = index;
},
// 返回上一页
returnFn() {
this.$router.go(-1);
},
// 加入购物车
joinShopCar() {
if (confirm("确定要加入购物车吗?")) {
let shopcarList = JSON.parse(localStorage.getItem("shopcar")) || [];
this.goodsData.num = 1;
this.goodsData.isChecked = false;
let ind = shopcarList.findIndex((ele) => {
return ele.id == this.goodsId;
});
if (ind != -1) {
shopcarList[ind].num++;
} else {
shopcarList.push(this.goodsData);
}
localStorage.setItem("shopcar", JSON.stringify(shopcarList));
this.$router.push("/shopcar");
}
},
// 立即结算
payFn() {
localStorage.setItem("goodspay", JSON.stringify(this.goodsData));
this.$router.push("/pay");
},
// 获取商品详情数据
async getGoodsDetail() {
try {
let { data } = await getGoodsDetailApi(this.goodsId);
this.goodsData = data.data.goodsData;
console.log(this.goodsData);
} catch (err) {
console.log(err);
}
},
},
created() {
this.goodsId = this.$route.query.id;
this.getGoodsDetail();
},
};
</script>
```
<h1>用户顾客列表</h1> <div> <p>顾客姓名:</p> <input type="text" id="name" /> <p>顾客职业:</p> <input type="text" id="career" /> <p>电话号码:</p> <input type="text" id="phone" /> <button onclick="saveData()">保存</button> </div> <script> function saveData() { var name = document.getElementById("name").value; var career = document.getElementById("career").value; var phone = document.getElementById("phone").value; localStorage.setItem("name", name); localStorage.setItem("career", career); localStorage.setItem("phone", phone); location.href = "edit.jsp"; } </script>如何在这个代码的基础上增加删除按钮,单击删除按钮,弹出是否删除的确认提示框,单击确定按钮后,删除所选的顾客信息。 删除后列表刷新,显示删除后的列表。单击取消按钮后,不会删除顾客信息。
可以在用户顾客列表的div中添加一个table,用来显示顾客信息。在每个顾客信息后面添加一个删除按钮,单击删除按钮时调用相应的函数,弹出确认提示框。如果用户点击确定,则从localStorage中删除相应的顾客信息,并重新加载用户列表。
以下是修改后的代码:
```
<h1>用户顾客列表</h1>
<div>
<p>顾客姓名:</p>
<input type="text" id="name" />
<p>顾客职业:</p>
<input type="text" id="career" />
<p>电话号码:</p>
<input type="text" id="phone" />
<button onclick="saveData()">保存</button>
</div>
<table id="customerTable">
<tr>
<th>姓名</th>
<th>职业</th>
<th>电话号码</th>
<th>操作</th>
</tr>
<script>
// 加载已有的顾客信息
var customerList = JSON.parse(localStorage.getItem("customerList")) || [];
for (var i = 0; i < customerList.length; i++) {
var customer = customerList[i];
var row = document.createElement("tr");
row.innerHTML = "<td>" + customer.name + "</td><td>" + customer.career + "</td><td>" + customer.phone + "</td><td><button onclick='deleteCustomer(" + i + ")'>删除</button></td>";
document.getElementById("customerTable").appendChild(row);
}
function saveData() {
var name = document.getElementById("name").value;
var career = document.getElementById("career").value;
var phone = document.getElementById("phone").value;
var customer = { "name": name, "career": career, "phone": phone };
customerList.push(customer);
localStorage.setItem("customerList", JSON.stringify(customerList));
location.href = "edit.jsp";
}
function deleteCustomer(index) {
if (confirm("确定要删除该顾客信息吗?")) {
customerList.splice(index, 1);
localStorage.setItem("customerList", JSON.stringify(customerList));
location.reload();
}
}
</script>
</table>
```
在这个代码中,我们首先加载已有的顾客信息,然后根据每个顾客信息创建一个新的行,并在最后一列添加一个删除按钮。当用户单击删除按钮时,我们调用deleteCustomer函数,弹出确认提示框。如果用户单击确定,则从localStorage中删除相应的顾客信息,并重新加载用户列表。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231044901.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pptx](https://img-home.csdnimg.cn/images/20241231044947.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)