JavaScript利用localStorage模拟一个购物车,前端端简单易用的SPI框架

存储的内容是永久保存的, 不能设置过期时间

除非手动删除

  • 获取 localStorage.getItem()

语法:localStorage.getItem(你要获取的key)

你存储的是什么你拿出来就是什么

存储复杂数据类型的时候, 转换成json 格式存储了

你获取出来的就是json 格式的字符串

注意: 如果获取一个没有的数据, 那么拿到的就是null

  • 删除localStorage.removeItem()

语法:localStorage.removeItem(你要删除的 key)

直接删除了

  • 清除localStorage.clear()

语法:localStorage.clear()

把 localStorage 里面的数据全部清除

    购物车列表

      • 3
        点赞
      • 0
        收藏
        觉得还不错? 一键收藏
      • 0
        评论
      好的,以下是一个简单购物车代码,使用localStorage进行本地存储: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> </head> <body> <h1>购物车</h1> <ul id="cart"></ul> <hr> <h2>商品列表</h2> <ul> <li>商品1 <button onclick="addToCart('商品1', 10)">加入购物车</button></li> <li>商品2 <button onclick="addToCart('商品2', 20)">加入购物车</button></li> <li>商品3 <button onclick="addToCart('商品3', 30)">加入购物车</button></li> </ul> <script> // 添加商品到购物车 function addToCart(name, price) { // 获取购物车数据 let cart = JSON.parse(localStorage.getItem('cart')) || []; // 查找是否已存在该商品 let existingItem = cart.find(item => item.name === name); if (existingItem) { // 已存在,增加数量 existingItem.quantity++; } else { // 不存在,添加新商品 cart.push({name: name, price: price, quantity: 1}); } // 保存购物车数据 localStorage.setItem('cart', JSON.stringify(cart)); // 刷新购物车展示 showCart(); } // 展示购物车 function showCart() { // 获取购物车数据 let cart = JSON.parse(localStorage.getItem('cart')) || []; // 清空展示列表 let cartList = document.getElementById('cart'); cartList.innerHTML = ''; // 遍历购物车数据,渲染列表项 cart.forEach(item => { let li = document.createElement('li'); li.innerText = `${item.name} x ${item.quantity} = ${item.price * item.quantity}`; cartList.appendChild(li); }); } // 初始化页面 showCart(); </script> </body> </html> ``` 代码中,每次点击“加入购物车”按钮时,会将商品的名称和价格添加到购物车中。购物车数据使用localStorage进行本地存储,以便在页面刷新后仍能保持之前的数据。同时,每次更新购物车数据后,会调用showCart函数重新渲染购物车展示列表。

      “相关推荐”对你有帮助么?

      • 非常没帮助
      • 没帮助
      • 一般
      • 有帮助
      • 非常有帮助
      提交
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值