你的浏览器不支持canvas

Enjoy life!

javascript - 本地存储 -- cookie - 下篇

Date: Author: JM

本文章采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。

  • 以下内容部分源于:
    • 《JavaScript高级程序设计(第3版)》

一、实例:用户登录

1.1 过程

  • 大家都知道,HTTP是无状态的协议,那么如果多台电脑去访问相同的服务器,那么服务器又是通过什么来分辨每一台电脑呢?答案:那就是cookie,我们需要通过cookie实现 登录态
  • 接下来讲讲用户登录的大致过程。

relationship-map

relationship-map

relationship-map

1.2 demo 目录以及解析

  • demo 目录

relationship-map

  • demo 解析

relationship-map

1.3 demo 下载

  • 点击下载demo
  • 下载 demo 后可以阅读 readme.md 文件,里面有详细的操作步骤。

1.4 demo 过程

relationship-map

二、总结

2.1 收获

  • 一开始还以为 Set-Cookie 后,还需要通过 xhr.getResponseHeader()获取其值,并使用 js 将获取到的值通过 document.cookie 设置,才能算是设置 cookie 成功。
  • 为什么会出现这种想法呢?
    • 那是因为一开始我就忘记了 cookie不能跨域
  • 同时,由于是第一次做这样的 demo,我并不知道 Set-Cookie 只要在同源下,就能同时在浏览器中设置对应的 cookie (这个可以在控制台的 Application 中看到,在那个错误的想法里,我在 Application 中是看不到想要设置的 cookie,所以才兜了一个大圈!!)

2.2 不足

  1. 尽管我是使用 nodeJs,但是没用使用 Express 框架,所以你就会看到 app.js 文件里有超多个 if...else... 的路由判断语句!!
  2. 在不使用框架的情况下,暂时无法配置静态资源的路径,因此,我都是通过 fs.readFileSync() 读取文件,才 res.write() 数据的。 除此之外,我 jscss 都写在了 html 页面里,也是因为不会配置静态资源的路径。

对于本文内容有问题或建议的小伙伴,欢迎在文章底部留言交流讨论。