首页
学习
活动
专区
圈层
工具
发布

cookie动态存删js购物车

基础概念

Cookie 是一种存储在用户浏览器上的小型文本文件,用于保存用户相关的信息,如登录状态、购物车内容等。Cookie 可以通过 JavaScript 进行动态的存储和删除操作。

优势

  1. 持久性:可以设置过期时间,使得数据在一定时间内保持有效。
  2. 跨页面共享:同一域名下的所有页面都可以访问同一个 Cookie。
  3. 简单易用:通过 JavaScript 可以方便地进行读写操作。

类型

  • 会话 Cookie:在浏览器关闭后自动删除。
  • 持久 Cookie:设置了过期时间,在过期时间之前一直存在。

应用场景

  • 用户认证:保存用户的登录状态。
  • 购物车:记录用户添加到购物车的商品信息。
  • 个性化设置:保存用户的偏好设置。

示例代码

以下是一个简单的示例,展示如何使用 JavaScript 动态存储和删除购物车中的商品信息。

存储商品信息

代码语言:txt
复制
function addToCart(productId, productName) {
    let cart = getCart();
    let item = { productId: productId, productName: productName };
    
    // 检查商品是否已存在
    let existingItem = cart.find(item => item.productId === productId);
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        item.quantity = 1;
        cart.push(item);
    }
    
    // 更新 Cookie
    setCookie('cart', JSON.stringify(cart), 7); // 设置过期时间为7天
}

function getCart() {
    let cartStr = getCookie('cart');
    return cartStr ? JSON.parse(cartStr) : [];
}

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for(let i=0;i < ca.length;i++) {
        let c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

删除商品信息

代码语言:txt
复制
function removeFromCart(productId) {
    let cart = getCart();
    cart = cart.filter(item => item.productId !== productId);
    
    // 更新 Cookie
    setCookie('cart', JSON.stringify(cart), 7);
}

可能遇到的问题及解决方法

问题1:Cookie 大小限制

原因:浏览器对单个 Cookie 的大小有限制(通常为 4KB)。

解决方法

  • 尽量减少每个 Cookie 的数据量。
  • 如果需要存储大量数据,可以考虑使用 localStoragesessionStorage

问题2:跨域访问限制

原因:出于安全考虑,浏览器不允许跨域访问 Cookie。

解决方法

  • 确保所有操作都在同一域名下进行。
  • 如果需要在不同子域之间共享 Cookie,可以设置 domain 属性。

问题3:安全性问题

原因:Cookie 可能会被恶意网站利用,导致安全风险。

解决方法

  • 设置 secure 属性,确保 Cookie 只在 HTTPS 连接中传输。
  • 设置 HttpOnly 属性,防止 JavaScript 访问敏感 Cookie。

通过以上方法,可以有效地管理和操作购物车中的商品信息,同时确保数据的安全性和可靠性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Js逆向-猿人学(2)动态cookie

地址:http://match.yuanrenxue.com/match/2 ---- 本题简单看了一下,是动态cookie的问题。...不管什么难度,第一件事就是抓包,打开控制台从隐私页面进入(无缓存cookie的页面) 通过数据包能看到第一次请求时,index页面请求了两次, 对比一下,可以发现第二次的请求中多了cookie,m...然而控制台第一次请求后响应并没有set-cookie, 那么说明其实是有响应内容的,我们以代码来请求,或者使用fiddler、charles查看 果然,不携带cookie访问返回的是一堆js代码。...pycharm中新建一个js文件,粘贴进去然后格式化:ctrl+alt+L (也有直接进入调试的方法,可以使用js脚本定位ck参数的位置, 链接:https://blog.csdn.net/weixin...下面是修改后的js代码,可以生成m global.navigator={ userAgent: 'yuanrenxue.project', }; (function $c(k) { var B

1.3K30
  • 某动态js加密cookie网站爬虫记录

    ,bootstrap.js是动态变化,而且加密混淆过的。...爬虫的难度 相比其他网站,该网站爬虫的难度在于每次访问需要带上所需的动态cookie,但是脱离了浏览器环境,产生cookie的js代码无法执行,而且js代码也是动态变化的,所以无法只在js环境里面执行一次代码...我刚开始想的是调用goja,每次访问无论失败成功返回中都会附带动态js代码,所以可以用goja执行代码,获得cookie,带上cookie再访问。...但是随之而来的问题是,动态js代码中引用了window,document这样的浏览器环境中才有的全局变量。goja已经无法满足动态js的执行,到这里有一个解决办法就是使用chromedp库。...利用chromedp访问后已经无需再执行动态js,访问的时候代码已经执行过了,此时cookie已经产生。所以只需要利用chromedp获取headless chrome里存储的cookie即可。

    4.8K00

    js逆向-猿人学(9)动态cookie困难版

    猿人学爬虫比赛第九题:《动态cookie-困难版》 地址: http://match.yuanrenxue.com/match/9 ---- 确实有点东西,我打开控制台,用chrome调试页面时,刷新页面后一直在...请求 api/match/9的时候,会携带上之前的sessionid和一个新的cookie参数m。 那么m就是本题的重点了 要想找参数,就得调试,要想调试就需要过了无限debug。...把这个js文件内容复制到他们的ob混淆工具里 复制到编辑器中查看,定时器检测debug = = 在这个js中没搜到和cookie找到相关的参数,往上找一找,在第一次请求match/9时的response...中有一段js 复制出来之后,格式化一下。...res = decrypt(“1611645831”) + “r”; decrypt 在另一个js中: 然后就是枯燥的拼代码,测代码

    1.3K10

    浏览器三大存储

    基本概念 cookie cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。...原生api:document.cookie cookie操作库: js-cookie localStroge localStorage 是 HTML5 新加入的技术,它提供持久化、空间大的浏览器存储空间...读:localStorage.getItem(key) 写:localStorage.setItem(key,value) 写入的value只能是字符串 删:localStorage.removeItem...(key) 全删:sessionStorage.clear() 三者对比 名称 数据的生命期 存放数据大小 与服务器端通信 常用场景 Cookie 一般由服务器生成,可设置失效时间。...)中保存,不参与和服务器的通信 状态管理持久化、购物车数据 sessionStorage 关闭当前窗口就会清除 5MB 仅在客户端(即浏览器)中保存,不参与和服务器的通信 保存表单输入数据

    83710

    为什么强调 RESTful 的无状态性?-优雅草卓伊凡

    这种设计带来以下关键优势:可扩展性(Scalability)无状态服务可以轻松水平扩展(如 Kubernetes 动态扩容),因为任何服务器都能处理任意请求,无需同步状态。...示例对比场景无状态实现有状态实现用户登录每次请求携带 Authorization: Bearer 首次登录后服务器存 Session ID,后续请求依赖 Cookie购物车操作请求体显式传递...{productId: 123, action: "add"}服务器维护用户的购物车内存状态3....Q:无状态是否完全不能存数据?服务器可以存储持久化数据(如数据库),但不能存储客户端会话状态。✅ 允许:数据库存用户资料❌ 禁止:内存存用户最近搜索记录Q:无状态对性能的影响?...代码示例无状态 RESTful API(Node.js)// 客户端每次请求携带 JWTfetch('/api/orders', { headers: { 'Authorization': 'Bearer

    37500

    现代Web存储技术(二):存储容量规划与传统方案对比

    •会卡页面:读写数据时整个页面都得等着•容量太小:只有5MB,存不了什么大东西•只能存文本:图片、文件什么的都存不了实际体验你有没有遇到过网页突然卡住几秒?...•太小了:每个Cookie最多4KB•拖慢网速:每次请求都会把所有Cookie发给服务器•不安全:容易被脚本读取(除非设置HttpOnly)真实案例某些网站Cookie太多,光是发送Cookie就要几KB...我们用具体例子来感受一下:一个音乐网站能存多少歌?一首3分钟的歌(128kbps):约3MB1GB能存300多首歌Chrome给的空间能存10万首歌!一个新闻应用能存多少文章?...一篇图文并茂的新闻:约50KB1GB能存2万篇文章够你看一辈子了一个在线文档应用能存多少文档?...一个10页的Word文档:约100KB1GB能存1万个文档比大多数人一辈子写的都多实际项目中的存储使用:拿一个典型的新闻应用举例:应用本身(HTML、CSS、JS、图标):10MB缓存100篇新闻文章:

    33720

    了解 Session、LocatStorage、Cache-Control、ETag

    典型的场景比如购物车,当你点击下单按钮时,由于 HTTP 协议无状态,所以并不知道是哪个用户操作的,所以服务端要为特定的用户创建了特定的 Session,用用于标识这个用户,并且跟踪用户,这样才知道购物车里面有几本书...key、value,只能以字符串的形式存如果要存一个对象,可以用 JSON.stringify 进行转化localStorage.getItem () 可以获取值,只接受一个 namelocalStorage.clear...但是,浏览器觉得你存那么久也没啥用,一般一年以后就帮你清了你问有什么后果吗?没有!...反正也没 bug,也就是加载可能慢一点点而已图片首页不会使用使用 cache-contorl如果要升级 css 或 js 就在后面加上一个查询参数如 https://cdn.bootcss.com/jquery.../3.3.1/jquery.min.js更新后:https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js?

    1.4K50

    知乎答案翻车:RFC标准告诉你Cookie到底是谁的

    你往购物车加了个商品,刷新一下页面,购物车空了——因为服务器根本不记得你是谁。 MCI明确表示:我们不想在服务器端保存用户的购物车状态(服务器资源宝贵)。能不能想个办法,把状态存在用户那边?...三、Cookie的工作机制 很多人以为Cookie的流程是: 前端存数据 → 前端取出来 → 前端发给后端 错。...这是所有Web框架的标准功能: • Node.js: req.cookies • Python Flask: request.cookies • Java Spring: @CookieValue •...PHP: $_COOKIE 后端不仅能读,还能写(通过Set-Cookie响应头),还能删(设置过期时间为过去)。...Cookie每次请求都会自动带上,如果你存了大量数据在Cookie里,会白白增加每个HTTP请求的体积,影响性能。 七、Cookie的安全风险 Cookie虽然方便,但也带来了安全隐患。

    47510

    JS hook 3种方法

    JS hook 3种方法环境win10node方法一:覆盖原函数直接全部重写原函数function xxx(){console.log("1111");}xxx = function(){console.log...;图片方法二:通过Object.defineProperty替换一个对象的属性属性里可能存的是方法,也可能存的就是一个值(值有两个方法getter、setter)//下面是一个示例:这个示例演示了hook...) {//这样就可以快速给下面这个代码行下断点//从而快速定位设置cookie的代码console.log('Hook捕获到cookie设置->', val);cookieTemp = val;return...JS hook 时机1.在控制台注入的hook,刷新网页就失效了解决:在网页加载第一个js的位置,第一行下断点,然后在控制台手动注入hook,适用于快速调试问题:有可能注入hook的时机还是会晚一点,因为下断点的...js位置不一定是第一个加载的2.利用Fiddler的替换响应,注入hook这种时机比较靠前3.油猴插件(不推荐,容易被检测)****本文仅供学习交流使用,如侵立删!

    1.2K20

    深入浅出前端本地储存

    Cookie 的历史 Cookie 早在1994 年就被发明了出来,它的历史甚至和互联网本身的历史一样悠久 和其它两种本地储存方案不一样的是,Cookie 本身并不是为了解决「在浏览器上存东西」而被发明...用在电商网站上,用来记录购物车里的商品,这样当用户想要结账时,浏览器会把 Cookie 里的商品数据以及用户信息发送给服务器,服务器就能知道用户想要购买哪些商品 Cookie 在很长一段时间内,都是浏览器储存数据的唯一解决方案...Cookie Set-Cookie: userId=123; 浏览器在检测到返回请求的 header 里有 Set-Cookie 请求头后,就会自动设置 Cookie,不需要开发者用 JS 去做额外的操作...也不是完美的,它有两个缺点: 无法像 Cookie 一样设置过期时间 只能存入字符串,无法直接存对象 举个例子,假如你想存一个对象或者非 string 的类型到 LocalStorage: localStorage.setItem...,需要转义才能存 JS 对象 大部分情况下能完全替代 Cookie,且更安全 配合 token 可以实现更安全的登录鉴权 IndexedDB 储存空间无上限,功能极其强大 原生支持 JS 对象,能更好的储存数据

    1.2K10

    用Redis实现购物车增删改与清空(基础)

    购物车管理包含功能 提交商品到购物车 显示购物车列表 删除购物车里商品 修改购物车 清空购物车等等 购物车的实现方式 可以把购物车的数据,给存储到 session 里面,一旦关闭浏览器,则商品数据就丢失...; 可以把购物车的数据,给存储到 cookie 里面,可以长久的保存购物车里面的数据; 可以把购物车的数据,给存储到数据库里面,可以长久的保存购物车里面的数据; 可以把购物车的数据,给存储到缓存里(memcache...需要注意的是,调用该方法后,当前脚本就不能进一步操作 Session 了 实例:京东购物车的设置,如果用户已经登录,则把购物车数据保存到数据库里面,如果没有登录,则把购物车的数据给保存到 cookie...里面,当登录时,要判断 cookie是否有购物车的数据,如果有,则把 cookie 里面的数据给移动到数据库里面。...//加入 return $this->redis->hIncrBy($hashKey,$key,1); } /** * 单删

    1.1K30

    ASP.NET Core Minimal API 里的 Session、Cookie、JWT

    比如:普通用户能看自己的订单管理员能删用户财务能导出报表内部服务能调用某个接口3.3 最重要的一句话你一定要先记住: 认证:你是谁 授权:你能做什么并且顺序必须是: 先认证,再授权因为系统连“你是谁”都没确认...所以你可以这么记:Cookie:客户端存数据Session:服务端存数据常见组合:客户端通过 Cookie 带一个 SessionId,服务端通过 SessionId 找 Session 数据6.3 为什么...Session 更适合存:验证码多步骤表单临时数据购物车草稿登录前临时跳转地址用户本次访问的临时状态不太推荐用来手工维护整个登录认证体系。...10.1 普通 Cookie浏览器存一小段数据。10.2 Session服务端存一份会话数据,通常浏览器通过 Cookie 带一个 SessionId 来找到它。.../ React 前后端分离 + Minimal API优先选:JWT理由:前端和后端完全分离前端自己带 Token 更灵活适合多终端12.3 你只是想存验证码、购物车、临时状态用:Session但别把它当成完整认证方案

    17900

    Cookie详解

    三、Cookie 的核心作用用途示例会话管理用户登录状态、购物车内容个性化设置记住语言、主题、字体大小用户行为跟踪统计访问路径、广告点击(需合规)A/B 测试根据用户分组展示不同页面四、Cookie 的工作原理五...(true)HttpOnly禁止 JS 访问cookie.setHttpOnly(true)SameSite防止 CSRF 攻击cookie.setSameSite("Strict") 最佳实践建议:敏感信息...的安全性问题与防护风险说明防护措施XSS(跨站脚本)JS 窃取 Cookie✅ 设置 HttpOnly=trueCSRF(跨站请求伪造)恶意网站伪造请求✅ 设置 SameSite=Strict/Lax...中间人攻击明文传输被截获✅ 使用 Secure=true + HTTPS敏感信息泄露存储密码等❌ 禁止在 Cookie 中存敏感数据 黄金组合: HttpOnly + Secure + SameSite...+ HttpOnly Cookie用户偏好:localStorage购物车:Cookie 或 localStorage十、Cookie 优缺点总结✅ 优点实现简单,兼容性好减轻服务器存储压力提升用户体验

    1.9K11

    美多商城项目(七)

    答:每个登录用户的购物车记录采用redis中两条数据来存: hash:存储登录用户购物车中添加的商品id和对应数量。 set:存储登录用户购物车中被勾选的商品id。...客户端cookie中 答:未登录用户可能根本不是网站注册用户,只访问一次就永不访问,如果将购物车记录存储到服务器,可能会造成服务器存储空间浪费,所以可以直接未将登录用户购物车记录存储到客户端。...cookie/sessionSrotage/LocalStorage三种存储方式,我们选择存储到cookie中。 2.怎么存?...# 设置cookie中购物车数据: cart_data = bae64.b64encode(pickle.dumps(cart_dict)).decode() response.set_cookie('...cart',cart_data,max_age='过期时间:s') # cookie中购物车数据解析 cookie_cart = request.COOKIES.get('cart') cart_dict

    2.6K30

    购物车原理以及实现

    购物车的几种实现方式 购物车的实现方式有很多,但是最常见的就三种:Cookie,Session,数据库.三种方法各有优劣,适合的场景各不相同....Cookie方法:通过把购物车中的商品数据写入Cookie中,再通过浏览器进行读取.这个方法,适合在用户没有登录的情况下使用,但是有个非常严重的缺点,即在用户禁用了Cookie的时候是无法使用的....; //清空购物车列表 $("#shop_cart tbody").empty(); //动态构建购物车列表...,然后把购物车商品列表以JSON格式传回,也就是封装在result中,利用js,动态构建购物车列表.于是就出现下面这种情况....首先提示用户已经加入购物车,然后在利用异步请求构建整个购物车,如果你对前端的了解并不是很深,不必担心,这部分内容实际上很简单,你可以随便百度一下这个知识点,记住就好了.实际上就是利用js操作json数据而已

    7.2K20

    flask的cookie和session

    在Flask的框架中,自己已经封装了 cookie的respons,request 有存储就有读取及删除,那么就拿购物车来举例   在我们登陆的时候会有之前在购物车存放的物品。...前提有一个是要你登陆之后才能看到自己的购物车   cookie对应的是client session对应的是server。  也就是说,要在服务器上登录你对应的账户,才能看到你自己在购物车添加的物品。...思路有了,就要上代码 首先来看cookie的简单存储,读数据,删除数据怎么实现  # -*- encoding: utf-8 -*- # cookie相关的操作,依赖于make_response库,调用...存在自己电脑的个人当资料里 # 存cookie的方法 @app.route('/setcookie') def set_cookie(): resp = make_response('存储cookie...def del_cookie(): # 通过make_response对象内置的delete_cookie方法来指定key来删除vaule resp = make_response('

    69810

    微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作

    前言 在开发小程序的时候,一般的小程序用官方自带的菜单栏就够了,但一但稍微复杂的小程序可能因为产品经理的一句“页面太多了得加个菜单”,就可能要对菜单栏进行增、删、改的操作,这个时候自带的就满足不了需求了...但官方提供的自定义菜单栏有个特点,就是菜单栏的页面必须是 Component ,假如你是在项目做到一半的时候有要对菜单栏进行增、删、改的需求,用官方提供自定义菜单栏就需要把page页面改成 Component...- index.json - index.wxml - index.wxss index.js 文件代码 // components/shoping-tabbar/index.js...、购物车、订单三个页面,序号分别为1,2,3。...() 方法里分别初始化是否显示菜单的变量 this.setData({ tabbar_type: app.globalData.tabbar_type }) 最后一步很关键,通过上面的成品效果动态图可以看到

    91410
    领券