一、cookie与session知识
1 cookie
- http是无状态协议；简单的说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到，这是用一个浏览器在访问同一个网站；
- 但是为了用户体验，我们确实需要让服务器能够记忆用户的一些信息；cookie应用而生；
- cookie的原理是：当访问一个页面的时候，服务器在下行http报文中，命令浏览器存储一个字符串；浏览器再访问同一个域的时候，将把这个字符串携带到上行http请求中；
- cookie的哲学是：往用户电脑中存；
- 所以：第一次访问服务器，不可能携带cookie，必须是服务器得到这次请求，在下行响应报头中，携带cookie信息，此后每一次浏览器往这个服务器发出的请求，都会携带这个cookie；
- cookie没有跨域限制；
- cookie的特点：
- cookie是不加密的，用户可以自由看到
- 用户可以删除cookie，或者禁用它
- cookie可以篡改
- cookie可用于攻击
- cookie存储量很小，可以被localStorage替代；
- 可以在服务器端传递；
- 使用cookie必须使用：cookie-parser模块 express模块；
- cookie设置、获取、删除：
- 设置：
res.cookie("name","msg",{}); - 获取： 1）未签名版：
req.cookies.name;2）签名版：req.signedCookies.name; - 删除：
res.clearCookie("name");
- 设置：
- 设置cookie时，对象中的参数；
- secret:"密钥";
- maxAge:存储时间，单位毫秒；
- signed:true/false；是否需要签名；
- httpOnly:true/false；是否只允许http请求；
- 密钥四步走：
- 中间件：
app.use(cookieParser("密钥"));引入cookie-parser模块； - secret:"密钥";
- signed:true;
- req.signedCookies:获取；
- 中间件：
- cookie设置、获取、删除：
- 在浏览器控制台，查看application下的Cookies，可以看到储存的cookie;可以删除cookie；
1.1 cookie小项目
- 思路：
- 下载express模块和cookie-parser模块;
- express创建服务器；设置cookie中间件；
- 添加请求：
- get:"/gonglue" => 发送请求后，设置cookie；在地址中需要输入参数；如
http://localhost:8080/gonglue?destination=hebei,- 通过req.query来获取参数对象，通过destination属性名，获取属性值；
- 通过
res.cookie("名字","值",{maxAge:存留时间,httpOnly:true})，设置cookie参数； - 其中maxAge为存留时间，单位：毫秒；httpOnly指：是否只允许http请求；
- get:"/cookie" => 发送请求后，获取到cookie设置的数据，然后显示；
- 通过
req.cookies.名字，来获取到设置的数据；
- 通过
- 注：设置cookie用res,获取cookie用req;
- get:"/gonglue" => 发送请求后，设置cookie；在地址中需要输入参数；如
- 注意点：
- 在第一次请求"/gonglue"时，req.cookies.Destination是不存在的，所以需要通过"||"来赋值[];
- 数组数据的更新时，需要进行去重处理；
- 在请求"/cookie"时，如果没有创建数据，拿到的req.cookies.Destination也是不存在的；为undefined,所以也需要通过"||"来设置；
- 设置时，值为数组；在页面上展示时为字符串；设置布尔值时，也需设置字符串"true";
- 代码：
//引入模块 const express=require("express"); const cookieParser=require("cookie-parser"); //创建服务器 const app=express(); //服务器监听端口号 app.listen(8080); //添加中间件 app.use(cookieParser()); //发送请求 app.get("/gonglue",function (req, res) { //地址栏：http://localhost:8080/gonglue?destination=hebei var mudidi=req.query.destination;//通过req.query拿到地址栏问号后面的参数，为对象；通过属性名拿到属性值； var aryDes=req.cookies.Destination || [];//通过req.cookies来拿到设置的cookie； if(aryDes.indexOf(mudidi)<0){ //去重处理，当cookie中已经存在了数据，就不再插入；没有就插入； aryDes.push(mudidi);//aryDes重新赋值； } //服务器设置cookie，通过res.cookie()设置，其中Destination为属性名，aryDes为属性值，为一个数组； res.cookie("Destination",aryDes,{ maxAge:2*24*60*60*1000,//设置存活时间为两天，单位毫秒； httpOnly:true }); res.send(`我想旅游的地方是: ${mudidi}`) }); //发送请求，显示设置的cookie app.get("/cookie",function (req, res) { //地址栏：http://localhost:8080/cookie var des=req.cookies.Destination || "空";//获取设置的cookie; res.send(`你可能感兴趣的地方是 ${des}`); });
2 session
- 解决问题：
- 解决http无状态协议；
- 与cookie类似，解决cookie的缺点：
- cookie为明码显示，而session为乱码显示，提高安全性；
- cookie数据设置在浏览器中，内存空间很小；不能储存大数据；而session的数据设置在服务器端，通过一个乱码id显示在浏览器中，当再次使用session时，服务器识别乱码id来获取数据；服务器内存空间很大，解决内存空间问题；
- 依赖：
- session不是天生存在的，它是依赖cookie的，如果用户在浏览器中禁用cookie后，登录效果失效；如果删除cookie也会失效；
- session依赖express模块；
- session原理：
- 第一次浏览器在访问服务器时，cookie为空，服务器给该用户种个cookie{sessionid:xxx};
- 浏览器端通过识别cookie设置的session的id,通过此id，在服务器端找到存储的信息；
- session设置、获取、删除：
- 设置：
req.session.xxx; - 获取：
req.session.xxx; - 删除：
delete req.session;
- 设置：
- 使用方法：
- 1）利用express模块和express-session模块实现；
- 2）利用express模块和cookie-session模块和cookie-parser模块；
- session依赖cookie；所以使用cookie-session必须先引入cookie-parser;
- 方法1：使用express-session模块；
- 思路:
- 引入express模块创建服务器，引入express-session模块；
- 引入中间件；注意：secure设置为false,代表不是只https请求；设置true，http协议不能正常使用；还可以在对象中设置maxAge和httpOnly；
app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, cookie: { secure: false,maxAge:2*60*1000,httpOnly:false} }));- get:"./login" => 发送请求，设置session;
- get:"/" => 发送请求，获取session;
- 注意：设置布尔值时,直接设置true，不能设置字符串"true"；
- 代码：
const express=require("express"); const session=require("express-session"); const app=express(); app.listen(8080); //引入中间件 app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, cookie: { secure: false }//设置为false; })); //session中设置和获取，均用req; //发送请求，获取session app.get("/",function (req, res) { if(req.session.login){ res.send("欢迎"+req.session.username); }else{ res.send("请登录") } }); //设置session app.get("/login",function (req, res) { req.session.login=true; req.session.username="guo"; res.send("登录成功"); }); - 思路:
- 方法2：使用cookie-session模块
- 模块：express cookie-parser cookie-session
- 注意：先引入cookie-parser，后引入cookie-session
- 设置中间件
- 代码：
const express=require("express"); const cookieParser=require("cookie-parser"); const cookieSession=require("cookie-session"); const app=express(); //设置中间件 app.use(cookieParser()); app.use(cookieSession({ name: "session",//更改session的名字 keys: ["key1"], maxAge:10*60*1000 })); //路由设置 app.get("/set",function (req, res) { req.session.name="gtian"; res.send("success"); }); app.get("/get",function (req, res) { console.log(req.session); res.send("ok") }); //端口号监听 app.listen(3333,function () { console.log("3333 server is running"); }); - 简书链接：session和cookie;
二、webStorage
- webStorage；分为：localStorage和sessionStorage
- localStorage：本地存储在浏览器中；不能传递给服务器端；
- 生命周期：只要通过setItem()设置后，在同一个浏览器中，就已经存储上，不会消失，只能通过removeItem()或clear()来删除；
- 注意：同一个浏览器中不同的文件中，都可以拿到存储数据，并对其进行操作；
- localStorage:是类函数Storage的实例，类的原型上存在多个方法，进行本地存储的操作；
- 私有属性：length，指绑定key的个数；
- 方法：setItem(key,value);getItem(key);removeItem(key);clear();key(索引值)
- 调用方法：
window.localStorage.setItem();，其中window可以省略；
- sessionStorage：本地存储在一个会话中，即一个页面中；
- 生命周期：储存在本窗口中，其他窗口不能获取，关闭窗口后，存储的数据会销毁；
- sessionStorage:也是类函数Storage的实例，存在私有属性和调用类函数的公共方法；
- 调用方法：
windos.sessionStorage.setItem();;
- 缺点：只能本地存储和传递，不能在服务器端进行传递；
- localStorage：本地存储在浏览器中；不能传递给服务器端；
三者的区别
- cookie与session的区别
- cookie存储在浏览器端，存储数据大小限制在4k;而session存储在服务器端，存储数据无限制；
- session依赖于cookie，设置session时，通过在浏览器端设置cookie来存储id，需要获取session数据时，必须通过cookie存储的id去服务器端进行识别获取；
- webStorage与cookie的区别
- cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器端来回传递，而localStorage和sessionStorage不会自动把数据传送给服务器端，仅在本地保存。
- 存储大小限制不同。cookie的存储数据大小要求不能超过4k，每次的http请求都会携带cookie，所以保存的数据需要比较小。sessionStorage和localStorage存储数据大小限制比cookie要大，可以达到5m或者更大，不同浏览器设置可能不同。
- 数据生命周期有所不同。cookie的生命周期一般在其设置的过期时间之前有效。而sessionStorage仅在关闭窗口前有效，localStorage持久有效，直到手动删除。
- 作用域不同，sessionStorage不在不同浏览器中共享，即使是同一页面也不支持。而localStorage在所有同源窗口中都是共享的，同样，cookie在所有同源窗口中也是可以共享的。
- cookie的数据还有路径的概念，可以通过设置限制cookie只属于某一个路径。
- webStorage支持事件通知机制，可以将数据更新的通知发送给监听者。
- 使用webStorage的好处：
- 减少网络流量：使用webStorage将数据保存在本地中，不用像cookie那样，每次传送信息都需要发送cookie，减少了不必要的数据请求，同时减少数据在浏览器端和服务器端来回传递。
- 快速显示数据：从本地获取数据比通过网络从服务器获取数据效率要高，因此网页显示也要比较快。
- 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
- 不影响网站效能：因为webStorage只作用在客户端的浏览器，不会占用频宽，不想网站效能，所以可以把size大，安全性低的资料存储在web Storage中，提高网站效能。
- 参考链接：几种存储方式;
