快来清空你的购物车吧

课程目标

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

您需要掌握的知识：

• DOM 操作
• 处理对象
• Cookie

阅读

• cookie | JavaScript 现代教程 (opens new window)
• HTTP cookies - HTTP | MDN (opens new window)
• JavaScript Cookie (opens new window)
• 您需要了解的有关 Web 开发 Cookie 的所有信息 (opens new window)
• 网络安全：如何强化您的 HTTP cookie (opens new window)
• 视频教程：面向 JavaScript 初学者的：购物车教学 (opens new window)

编码一

创建一个 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),实现一个购物车功能。

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

需求描述

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

要求

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

提交

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

总结

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

自测问题

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