js利用本地储存开获取商品足迹

最新推荐文章于 2022-08-13 16:08:58 发布

nan囡315

最新推荐文章于 2022-08-13 16:08:58 发布

阅读量159

点赞数 1

本文链接：https://blog.csdn.net/hangnan315/article/details/117133405

版权

js利用本地储存开获取商品足迹

步骤

  1.在点击li时，产生一条历史访问记录
   1.1获取所有的商品的li标签。
   1.2获取商品详情
    1.3 将这条记录放入到localStorage中，  数组[] 转json字符串 放入到localStorage
   1.4 放入时应该判断是否存在 判断ID是否存在，。  是的话，将原来的删除，新的放入  没有的话，    直接放入
   1.4 历史记录是有长度显示的。 最多只能存放三条，当你放入第四条的时候，应该删除第一条。（进阶）

  2.进入页面   先判断cookie中有没有足迹信息
   2.1 有  取出 遍历之后放入到footprint中
   2.2 没有

html:

<body>
    <img src="img/Snipaste_2021-01-20_10-18-01.png" alt="">
    <ul class="item-list">
    </ul>
    <h1>历史记录</h1>
    <ul class="item-list footprint">

    </ul>
    <script src="js/data.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/domo1.js"></script>
</body>

var itemList = document.querySelector(".item-list");
const footprint = document.querySelector(".footprint");
function createHTML(data) {
  var str = "";
  for (var i = 0; i < data.length; i++) {
    str += `<li class="item">
                    <a class="item-a" href="#">
                        <img class="item-img" src="${data[i].imgSrc}">
                        <div class="item-title">
                            <span class="title-text">${data[i].title}</span>
                        </div>
                        <div class="price-con">
                            <span class="price-title">¥</span>
                            <span class="price-afterCoupon">${data[i].afterCoupon}</span>
                            <span class="price-old">${data[i].oldPrice}</span>
                        </div>
                        <div class="seller-info">${data[i].sellerInfo}</div>
                        <div class="item-footer">
                            <div class="sell-info">${data[i].sellInfo}</div>
                        </div>
                    </a>
                </li>`
  }
  return str;
}
itemList.innerHTML = createHTML(dataList);

// 1.获取所有的商品的li标签。
const items = itemList.querySelectorAll("li");
for (let i = 0; i < items.length; i++) {
  items[i].onclick = function () {
    //  获取商品详情
    var detail = dataList[i];
    console.log(detail);
    // 检测本地储存中是否有该商品
    let arr = JSON.parse(localStorage.getItem("History"));
    if (!arr) {
      arr = [];
    }
    // 添加之前，先看看原来的数据中包不包含这个商品
    if (arr.length > 0) {
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        if (element.id == detail.id) {
          arr.splice(i, 1);
          break;
        }
      }
    }
    // 添加之前，再判断历史记录的长度是否超过3个。
    if (arr.length >= 3) {
      //  删除第一个
      arr.shift();
    }
    arr.push(detail);
    localStorage.setItem("History", JSON.stringify(arr));
    getArr();
  }
}
function getArr() {
  let str = JSON.parse(localStorage.getItem("History"));
  footprint.innerHTML = createHTML(str);
}
getArr();

var dataList = [{
    id:1,
    imgSrc: "img/1.webp",
    title: "SUSISUMMER篙定水波纹羊绒精工直筒裁剪POLO领松紧抽褶短大衣女",
    afterCoupon: "4280.00",
    oldPrice: "¥4280.00",
    sellerInfo: "SUSISUMMER",
    sellInfo: "月销 20"
}, {
    id:2,
    imgSrc: "img/2.webp",
    title: "ONLY2021春季新款减龄娃娃领收腰显瘦小黑裙连衣裙女",
    afterCoupon: "899.00",
    oldPrice: "¥899.00",
    sellerInfo: "SUSISUMMER",
    sellInfo: "月销 493"
}, {
    id:3,
    imgSrc: "img/3.webp",
    title: "复古连衣裙高端洋气方领拼接通勤纯色高腰长袖长裙女装单件春季",
    afterCoupon: "158.00",
    oldPrice: "¥198.00",
    sellerInfo: "精品时尚靓装",
    sellInfo: "月销 2"
}, {
    id:4,
    imgSrc: "img/4.webp",
    title: "2020年秋冬新款复古港风格子法式V领连衣裙女长款韩版格子西装裙",
    afterCoupon: "168.00",
    oldPrice: "¥198.00",
    sellerInfo: "探匠女装",
    sellInfo: "月销 1"
}, {
    id:5,
    imgSrc: 'img/5.webp',
    title: 'hego收腰小黑裙显瘦气质裙子女神范蕾丝高端大牌名媛黑色连衣裙秋',
    afterCoupon: '¥595.00',
    oldPrice: '¥595.00',
    sellerInfo: 'hego旗舰店',
    sellInfo: '月销 57'
}]

css

*{
    margin: 0;
    padding: 0;
}
.item-list {
    width: 1190px;
    font-size: 0;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    margin: 20px auto;
    list-style: none;
}

.item {
    width: 236px;
    height: 368px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #f2f2f2;
    border-top: none;
    border-left: none;
    background: #fff;
    vertical-align: top;
}

.item-a {
    display: inline-block;
    width: 234px;
    height: 366px;
    box-sizing: border-box;
    padding: 22px 20px 0;
    background: #fff;
    position: relative;
    text-decoration: none;
}

.item-img {
    width: 198px;
    height: 198px;
}

.item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #9b9b9b;
    line-height: 20px;
    padding-top: 10px;
    height: 40px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price-con {
    height: 25px;
    padding: 6px 0 0;
    line-height: 1.6;
}
.price-con .price-title{
    vertical-align: baseline;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #fd3f31;
    line-height: 1.6;
}
.price-afterCoupon{
    margin-left: 4px;
    vertical-align: baseline;
    text-align: left;
    line-height: 25px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #fd3f31;
}
.price-old{
    margin-left: 8px;
    vertical-align: baseline;
    text-decoration: line-through;
    line-height: 20px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #9b9b9b;
}
.seller-info{
    margin-top: 9px;
    font-size: 12px;
    color: #9b9b9b;
    line-height: 17px;
    background-color: #fff;
}
.seller-name{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.seller-icon{
    color: #fd3f31;
    font-size: 11px;
    margin-right: 2px;
    /* margin-left: -3.7px; */
}
.item-footer{
    margin-top: 4px;
    border-top: 1px solid #f2f2f2;
    padding: 9px 0;
    position: relative;
}
.item-tags{
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
}
.sell-info{
    position: absolute;
    right: 0;
    top: 9px;
    color: #9b9b9b;
    font-size: 12px;
    line-height: 17px;
    background: #fff;
    padding-left: 12px;
}
h1{
    text-align: center;
}

效果图

在这里插入图片描述

nan囡315

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js利用本地储存开获取商品足迹

js利用本地储存开获取商品足迹步骤 1.在点击li时，产生一条历史访问记录 1.1获取所有的商品的li标签。 1.2获取商品详情 1.3 将这条记录放入到localStorage中，数组[] 转json字符串放入到localStorage 1.4 放入时应该判断是否存在判断ID是否存在，。是的话，将原来的删除，新的放入没有的话，直接放入 1.4 历史记录是有长度显示的。最多只能存放三条，当你放入第四条的时候，应该删除第一条。（进阶） 2.
复制链接

扫一扫