首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

98730
  • 某动态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.2K00

    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中: 然后就是枯燥的拼代码,测代码

    80210

    浏览器三大存储

    基本概念 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 仅在客户端(即浏览器)中保存,不参与和服务器的通信 保存表单输入数据

    52310

    【JS 逆向百例】猿人学系列 web 比赛第二题:js 混淆 - 动态 cookie,详细剖析

    图片 逆向目标 猿人学 - 反混淆刷题平台 Web 第二题:js 混淆,动态 cookie 目标:提取全部 5 页发布日热度的值,计算所有值的加和 主页:https://match.yuanrenxue.com.../match/2 接口:https://match.yuanrenxue.com/api/match/2 逆向参数: Cookie 参数:m 逆向过程 抓包分析 进入网页,点击右键查看页面源代码,搜索不到直播间相关数据信息...失效,正在重置页面,证明 cookie 是有时效性的,并且会进行校验: 图片 cookie 中有个关键加密参数 m,其内容如下: 图片 逆向分析 通过 hook cookie 中 m 参数的方式对其进行定位...= -1) { debugger; } console.log('Hook捕获到cookie设置->', val); cookieTemp = val...(): heat_total = 0 for page_num in range(1, 6): with open('yrx2.js', 'r', encoding='utf

    1.2K20

    了解 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?

    87350

    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.油猴插件(不推荐,容易被检测)****本文仅供学习交流使用,如侵立删!

    63520

    深入浅出前端本地储存

    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 对象,能更好的储存数据

    83010

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

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

    73330

    美多商城项目(七)

    答:每个登录用户的购物车记录采用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

    1.9K30

    购物车原理以及实现

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

    6.4K20

    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('

    39710

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

    前言 在开发小程序的时候,一般的小程序用官方自带的菜单栏就够了,但一但稍微复杂的小程序可能因为产品经理的一句“页面太多了得加个菜单”,就可能要对菜单栏进行增、删、改的操作,这个时候自带的就满足不了需求了...但官方提供的自定义菜单栏有个特点,就是菜单栏的页面必须是 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 }) 最后一步很关键,通过上面的成品效果动态图可以看到

    19910

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

    前言 在开发小程序的时候,一般的小程序用官方自带的菜单栏就够了,但一但稍微复杂的小程序可能因为产品经理的一句“页面太多了得加个菜单”,就可能要对菜单栏进行增、删、改的操作,这个时候自带的就满足不了需求了...但官方提供的自定义菜单栏有个特点,就是菜单栏的页面必须是 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 }) 最后一步很关键,通过上面的成品效果动态图可以看到

    1.1K20

    2021年电商基础面试总结「建议收藏」

    /JQ(Bootstrap、node.js、angluar.js 等可以了解下) AJAX PHP:PHP+MySQL session 和 cookie Nosql(redis memcache mongdb...:① 可以把购物车的数据,给存储到 session 里面,一旦关闭浏览器,则商品数据就丢失;②可以把购物车的数据,给存储到 cookie 里面,可以长久的保存购物车里面的数据;③可以把购物车的数据,给存储到数据库里面...里面,当登录时,要判断 cookie是否有购物车的数据,如果有,则把 cookie 里面的数据给移动到数据库里面。...如果用户已经登录,则直接从购物车数据库里面取出数据,如果用户没有登录,则直接从 cookie里面获取数据。...最后在购物车控制器里面的 cartList 的方法中,并取出购物车数据,并在对应的静态页面里完成遍历,显示出来 5、cookie 移到 DB 中:用户登录后,要判断 cookie 里面是否有购物车数据,

    2.8K30

    使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    通过使用JavaScript和Vue.js框架,开发者可以实现电子商务网站的商品展示和购物车功能。商品展示功能可以让用户浏览和搜索各种商品,并查看详细的商品信息和图片。...购物车功能则可以让用户将感兴趣的商品加入购物车体验,并随时查看购物车中的商品和总价。具体数据分析:在电子商务网站中,商品展示是非常重要的一部分。...在本示例中,我们将使用JavaScript和Vue.js来编写一个爬虫,以爬取亚马逊网站的数据。相当于使用cookie和ua来模拟用户行为,并使用代理服务器来保护我们的爬虫。...和uaaxios.defaults.headers.common['Cookie'] = 'your_cookie_value';axios.defaults.headers.common['User-Agent...总结:介绍了如何使用JavaScript和Vue.js框架开发电子商务网站,并实现商品展示和购物车功能。通过爬虫技术获取商品信息,我们可以将这些数据展示在网站上,为用户提供良好的购物体验。

    50130

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券