cookie和localStorage和sessionStorage的区别?

cookie、localStorage（永久存储）和sessionStorage（临时存储）三者的区别

应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
sessionStorage：敏感账号一次性登录
cookie的作用：主要用于保存登录信息，设置“每次请求都要携带的信息（最典型的就是身份认证信息）”适合放在cookie中

三者相同点：Cookie、SessionStorage和LocalStorage都是存储在浏览器本地的

一、存储的时间有效期不同

1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

userRouter.get('/vCodeForUpdatePassword', async(req, res) => {
    let xgvcode = xgrdNum()
    res.cookie('xgvcode', xgvcode, {
        httpOnly: true,
        //主机名
        Domain: "localhost",
        //cookie存储时间
        maxAge: 3600 * 1000,
        Path: "/"
    });
    res.send({ xgvcode })
})

image.png

2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
3、localStorage的有效期是在不进行手动删除的情况下是一直有效的

二、存储数据大小不同

1.cookie的存储数据大小在不能超过4kb，每个页面最多存储20个cookie
2.localStorage能达到10mb，sessionStorage能达到5mb，虽然容量比cookie大，但是localStorage是同步执行，太大会影响渲染进度

三、存储位置

1.cookie存储位置：浏览器和服务器
2.localStorage和sessionStorage都是在浏览器里面的

四、访问

1.当cookie和localStroage被保存下来以后，所有窗口都能访问（前提需要同源）
2.sessionStorage仅在当前窗口有效，相对安全性高很多

五、存储内容类型

1.localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理