今天需要做一个功能,就是把数据存进本地浏览器里,之后进入页面在拿出来,自己做的一个小移动端的功能,把产品数据存进本地,当用户点击购物车的时候存进本地,之后进入购物车页面需要把数据拿出来,但是下次再添加数据进本地浏览器的时候,需要把本地的数据一起拿出来,和新要存的数据在一起存进去,这样数据才不会重叠,那么我的思路是这样的
// 添加进购物车
AddToCart() {
this.$toast("加入购物车成功");
// 当前要存的数据
this.nowlist = this.producData[this.$route.query.product];
// 获取本地浏览器的数据
let localnew = JSON.parse(localStorage.getItem("cartlist"));
//之后进行判断,如果不是第一次添加数据的话,那么需要把新数据存进当前的数组中,一起存到本地浏览器
if (localnew) {
localnew.push(this.nowlist);
localStorage.setItem("cartlist", JSON.stringify(localnew));
} else {
//否则,就是第一次添加数据的时候,定义一个大数组,把存的数据push进数组里,在存进本地,一定要保证每次存进去的是一个数组,里面是对象,否则,一次存数组,第二次存对象,那么这个数据是混乱的,而且之后遍历数据渲染数据是不成功的,因为数据类型不一样,没办法直接遍历拿出数据
this.cartlist.push(this.nowlist);
localStorage.setItem("cartlist", JSON.stringify(this.cartlist));
}
// 跳转路由
this.$router.push("/cart");