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

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量161 收藏
点赞数 3
分类专栏： 2024年程序员学习 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75604341/article/details/137128291
版权

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

除非手动删除

  • 获取 localStorage.getItem()

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

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

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

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

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

  • 删除localStorage.removeItem()

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

直接删除了

  • 清除localStorage.clear()

语法:localStorage.clear()

把 localStorage 里面的数据全部清除

    购物车列表

      起飞程序员
      关注
      • 3
        点赞
      • 踩
      • 0
        收藏
        觉得还不错? 一键收藏
      • 0
        评论
      专栏目录
      JavaScript利用localStorage模拟一个购物车
      k464746的博客
      03-05 1324
      js
      JavaScript利用localStorage模拟一个购物车(1)
      2401_84093310的博客
      04-19 121
      把 localStorage 里面的数据全部清除。
      JavaScript利用localStorage模拟一个购物车，一招彻底弄懂
      ghfgjfg679的博客
      04-04 165
      把 localStorage 里面的数据全部清除。
      JavaScript利用localStorage模拟一个购物车(1)，html5移动web开发实战
      2401_84091742的博客
      04-03 120
      把 localStorage 里面的数据全部清除。
      localForage 是一个 JavaScript 库，通过简单类似 localStorage API 来操作前端数据库
      06-13
      localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。 localForage 有一个优雅降级策略，若浏览器不支持 ...
      JavaScript-localStorage:这是一个用于 localStorage 的 JavaScript 模块，用于简化程序员
      07-03
      这是 HTML5 localStorage 类的 JavaScript。 我的目的是你可以用它来帮助你简化编码。如何安静地使用它首先，您必须将它链接到您的 html 中。 [removed][removed]然后，您需要在脚本中获取myStorage 。 var ...
      1500个前端开发常用JavaScript特效
      04-24
      8. **jQuery库**：尽管现代浏览器原生支持了许多jQuery的功能，但jQuery仍然是一个流行的库，提供了简洁的API来处理DOM操作、事件、动画等。 9. **Vue.js/React/Angular框架**：这些现代前端框架允许开发者用组件化...
      利用jQuery+localStorage实现一个简易的计时器示例代码
      11-29
      在本文中，我们将探讨如何利用jQuery和HTML5的localStorage特性实现一个简易的计时器。首先，localStorage是HTML5引入的新功能，它提供了一种在客户端存储数据的方式，弥补了cookie存储空间有限的缺点，通常浏览器对...
      基于JS前端开发的一个购物车案例
      04-21
      5. **清空购物车**：提供一个一键清空购物车的功能，JavaScript会删除所有存储的商品信息，同时刷新页面显示。 在实现这些功能时，JavaScript的数组操作、DOM操作以及事件监听等技能都将得到运用。例如，`push()` ...
      前端面试题日常练-day97 【Less】
      最新发布
      qq_44640575的博客
      07-20 280
      border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
      TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
      OpenTiny的博客
      07-17 1040
      本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
      谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
      epitomizelu的专栏
      07-20 510
      v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
      博客前端项目学习day03——框架页
      qq_53237241的博客
      07-19 275
      【代码】博客前端项目学习day03——框架页。
      【Web前端技术 01】 探索HTML5的奥秘：为初学者打造网页的基石
      Wc&Yd博客
      07-16 902
      探索HTML5奥秘，本文带初学者迈入网页设计大门。详解HTML5文档结构、语义化标签、新增API，助您构建现代网页，激发学习兴趣，开启开发之旅。
      前端性能优化--懒加载
      weixin_43799793的博客
      07-19 114
      3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
      谷粒商城实战笔记-35-前端基础-ES6-模块化
      epitomizelu的专栏
      07-20 314
      模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
      自定义 Hooks 在 Vue3 中的应用和重要性
      CodeQi技术小栈的博客
      07-16 1026
      自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
      vue3前端开发-如何让自己的网站适合SEO排名规则
      yrldjsbk的博客
      07-17 188
      我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
      用localStorage写一个简单的购物车代码
      05-17
      好的，以下是一个简单的购物车代码，使用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、付费专栏及课程。

      余额充值