一文弄懂session&cookie

session&cookie😁

先聊一聊session和cookie的起源

• web1.0强调的是资源的共享
• web2.0强调的是交互，引入了session和cookie用于实现状态的记录
• web3.0强调的是双赢

session和cookie的特征

• session和cookie都是服务器生成的，都是用来存储特定的值（键值对）
  
• session是返给服务器的，cookie是存储在客户端的。
  
• 客户端在发送请求的时候，会自动将可用cookie封装在请求头中并和请求一起发送
  
• session和cookie都是有生命周期的cookie的生命周期一般会受两个因素影响：

1. cookie的自身存活时间
2. 客户端是否保留了cookiesession的生命周期也由两个因素影响：

1. 服务器对于session对象保存的最大时间的设置
2. 客户端进程是否关闭（客户端关闭只对用户有影响）

• cookie和session都有其作用域
  

cookie是什么？

Cookie 是一些数据, 存储于你电脑上的文本文件中

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息

Cookie 的作用就是用于解决 "如何记录客户端的用户信息"

如何创建cookie

通过 JavaScript 创建 cookie

我们可以通过javascript的document.cookie属性来创建，读取，删除cookie

1. 创建cookie

document.cookie = "username=cxy";
复制代码

当然我们还可以为其设置有效日期，因为默认情况下浏览器关闭会删除cookie

document.cookie = "username=mengxiangrui; expires=cxy, 31 Dec 2021 12:00:00 UTC";
复制代码

2. 读取cookie

var cookie = document.cookie
复制代码

3. 改变cookie 我们想要改变cookie的时候我们可以通过再次创建来改变它
4. 删除cookie 我们直接可以通过设置日期为过去来删除cookie

来试一下用jq操作cookie吧

1. 创建cookie

$.cookie('name', 'cxy');
复制代码

2. 创建 cookie，并设置 7 天后过期

$.cookie('name', 'cxy', { expires: 7 });
复制代码

3. 读取 cookie

$.cookie('name'); // cxy
复制代码

4. 删除cookie

$.removeCookie('name')
复制代码

举个🌰

$(document).ready(function(){
  $.cookie('name', 'cxy');  // 创建 cookie
  name = $.cookie('name');     // 读取 cookie
  $.cookie('name2', 'cxy', { expires: 7, path: '/' });
  name2 = $.cookie('name2');
});
复制代码

跑在本地服务器上大家会看到我们存储的cookie

用JQ创建cookie

1. 创建 cookie：

$.cookie('name', 'value');
复制代码

如果未指定过期时间，则会在关闭浏览器或过期。

2. 创建 cookie，并设置 7 天后过期：

$.cookie('name', 'value', { expires: 7 });
复制代码

3. 创建 cookie，并设置 cookie 的有效路径，路径为网站的根目录：

$.cookie('name', 'value', { expires: 7, path: '/' });
复制代码

注： 在默认情况下，只有设置 cookie 的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 置的cookie，必须设置 cookie 的路径。cookie 的路径用于设置能够读取 cookie 的顶级目录。将这 个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

4. 读取 cookie：

$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
复制代码

5. 读取所有的 cookie 信息：

$.cookie(); // => { "name": "value" }
复制代码

6. 删除 cookie：

$.removeCookie('name');