每周分享之cookie详解

Posted 2020-11-06 sunshine-wy

　　　　本章从JS方向讲解cookie的使用。（实质上后端代码也是差不多用法，无非读取和设置两块）

　　　　基本用法：document.cookie="username=pengpeng"; 修改的时候也是这句，重新赋值即可。

　　　　一般的，cookie是记域名的，上面的写法，比如在www.test.com域名下生效，但是不会在www.test.com/p123.html下生效，因为默认的cookie是不跨URL子目录的，就是说cookie只记录在当前url下，首页的cookie是首页的，列表页是列表页的，哪怕cookie名称都叫username，它们也互不影响。

　　　　实际项目中我们肯定是不允许这种情况存在的，首页和列表页以及终端页等页面的cookie必须共享，这个时候就需要设置一下path， 写法：document.cookie="username=pengpeng；path=/"; 这个时候同一域名下的cookie共享，一般不会存在首页设置的cookie在其他页获取不到。

　　　　但也有特例，最近公司项目里就遇到了，问题出在一些叫个人中心以及帮助中心的页面，域名变了，准确的来说，二级域名变了 原本是www.test.com的，个人中心的域名是account.test.com，这个时候设置了path也没用， 此时已跨域，而cookie默认不跨域，是的，既然我说默认了，那肯定是有解决方案了，那就是domain属性！ 

　　　　写法：document.cookie="username=pengpeng；path=/;domain=test.com";

　　　　注意，domain后面写的是主域.com，只有这个时候浏览器里的cookie才是跨子域的！（但实际上主域是没法跨域的，最多跨子域，也就是最多实现二级域名、三级域名的cookie共享）。

　　　　最近被这个坑的不轻，在公司丢人了，当时和公司产品说cookie不能跨域，差点改了需求，虽然是小改，虽然她们好像也不知道我的这个尴尬事，不过还是挺醉的(*/ω＼*) 

 

　　　　用法基本就是上面提到的几点了，注意事项也提到了，主要是path和domain的设置注意一下就行。关于为什么用cookie，主要是方便，因为这东西是记录在浏览器里的，很多的用户行为能直接存储在用户的这边（顺便提一下，用户的数据如果全都存服务端，会给服务器带来巨大压力，特别是用户量大的时候，所以这也是cookie的一个好处，减轻服务器压力），不过总的来说，cookie只适合做少量存储，或者临时性存储，毕竟浏览器是可以清理缓存和cookie的。

　　　　既然提到客户端和服务端的概念，所以也可以引深一下别的概念，cookie的好处在于客户端存储，减轻服务端压力，但是有时候我们的一些数据（非用户数据相关的或者是一些共享信息），我们希望大家都用，那么这个时候就不能存在客户端了，不然你的我用不了，我的你用不了，所以session的好处就体现出来了，这也是我要引深的一个地方，session是存储在服务端的，所以能实现信息的共享或者完成和服务器的一些信息交互。

　　　　cookie和session都是少量信息的存储，一个存在客户端，一个存在服务端，根据各自的场景使用即可。（前端方向一般cookie使用比较多，session很少，使用cookie需要注意一点，总大小，4KB！！）

　　　　

　　　　　除了session需要了解一下以外，application也可以了解一下，为了省事找了一张图，很详细的对比了：

　　　   

　　　　　嗯，以上已经很详细说明了各个存值的场景和区别，不同情况的会分别去使用，application基本上我没见过，很少有人用，客户端cookie，服务端session、cache，webconfig一般后端在程序里灵活配置的时候会用到。对了，JS浏览器存储，除了cookie，还有一个叫本地存储的黑科技，这个可比cookie存的东西多多了，相当于一个小数据库，一个小的前端数据库，可以存很多东西，学名Local Storage，这个用起来也挺简单，就不赘述了，了解一下就行~~

 

　　　　　以上内容如果疑问欢迎指出，有兴趣的道友也可以一起讨论，一起学习一起进步！