WEB前端教程：快来清空你的购物车吧

学习如何在 JavaScript 中设置 cookie,修改 cookie，以及删除 cookie

课程目标

学习如何在 JavaScript 中设置 cookie,修改 cookie，以及删除 cookie
如何在 JavaScript 中为 cookie 设置过期日期
了解 cookie 的安全问题，了解 Man-in-the-middle 攻击，XSS 攻击，CSRF 攻击原理以及如何预防这些攻击

您需要掌握的知识：

DOM 操作
处理对象
Cookie

阅读

编码一

创建一个 js-cookie.js 文件，并且在 js-cookie.js 中实现以下方法

/**
 * @description 获取cookie
 * @method getCookie
 * @param {String} name cookie的键名
 * @return {String} 返回对应的cookie值，如果没找到，则返回 undefined
 */

function getCookie(name) {
  //your complement
}

/**
 * @description 设置cookie
 * @method setCookie
 * @param {string} name cookie的键名
 * @param {string} value cookie的键值
 * @param {object} [option] cookie其他项，比如过期日期、安全策略等
 */

function setCookie(name, value, options = {}) {
  //your complement
}

// 使用范例：
setCookie("student", "Amy", { secure: true, "max-age": 3600 });

/**
 * @description 删除cookie
 * @method deleteCookie
 * @param {String} name cookie的键名
 * @return {Bool} 删除成功返回true，删除失败，返回false
 */

function deleteCookie(name) {
  //your complement
}

编码二

利用上面封装的 js-cookie.js ,参考示例图 (opens new window),实现一个购物车功能。

购物车是任何在线商店不可或缺的一部分，它将您从浏览产品到结账的方式连接起来。通过该项目，您可以学习如何在购物车中添加和删除产品，以及如何根据购物车内产品的价格和数量显示总和。

需求描述

用户能够将产品添加到购物车
能够从购物车中删除产品以及修改产品的数量
能够在购物车内看到产品的名称、数量和价格
购物车实时自动计算出商品总价
购物车的产品列表信息需要存储在 Cookie 中，重新进入页面，购物车从 Cookie 中取商品列表。

要求

不使用任何第三方的布局或样式库
不使用任何第三方的 JavaScript 库
代码风格优雅，代码结构合理，技术设计恰到好处
示例图仅供参考，页面样式结构可以自行设计，实现功能需和上述用例描述一致

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

自测问题

什么是 cookie？它的应用场景是什么？
cookies,localStorage ,sessionStorage 有什么区别？
cookie 的工作原理是怎样的？
每次访问网站时，是不是将所有的 cookie 都发送所有的站点?

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-29 11:14
阅读 ( 475 )
分类：WEB前端开发

WEB前端教程：快来清空你的购物车吧

课程目标

阅读

编码一

编码二

提交

总结

自测问题

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »