关于标题提到的几个名词,相信大家都不会陌生,在做前端的时候是非常常见的。这里再次温习加深一下印象。
cookie、localStorage、sessionStorage都是用作浏览器缓存。
先介绍区别:
1. 存放数据大小
cookie:4kb左右
localStorage、sessionStorage:5mb左右
2. 存放时间
cookie:一般由服务器来生成,服务器可设置数据失效的时间(即有效期),客户端也可生成cookie, 默认是关闭浏览器即清除。
localStorage: 数据永久保存,除非手动清除。
sessionStorage:(顾名思义:session 对话的意思)即仅在当前会话有效,关闭浏览器或当前对话标签页数据即清除。
3. 应用场景
cookie:cookie一般比较小,所以较常用来保存用户的登录信息状态。
一般在登录页面用户登录成功时,后端返回相应的用户独一的token字段,并设置相应的失效时间,前端拿到相应的token字段后,接下来的请求都带上这个相应的token字段,进行相应的用户身份验证。若cookie相应的字段失效,即可跳转到相应的登录页,让用户重新登录,即达到保存用户登录状态的效果。同样的道理,利用这个想法,也可制作用户的默认登录,同样利用相应的token等字段,在用户访问我们的网站首页时,判断相应的token是否失效,若不失效,即表示用户可默认登录,若超过一定的期限失效,用户即可重新登录。
localStorage、sessionStorage:由于这两个可以存放的数据较为大, 因此应用场景其实见仁见智,主要看自己的需求,如博主在项目开发中遇到一个问题,即需记录当前页面由哪个页面跳转过来,当时博主利用了sessionStorage进行相应的记录,跳转到新页面之后,通过判断sessionStorage的字段判断是否由指定的页面跳转过来,即可进行相应的判断。或者说,有一些页面的数据不需频繁更新,不需要一直向后台请求相应的数据,也可存放到localStorage或sessionStorage中,进行相应的缓存记录,达到网站性能优化的结果。
4. 关于session
session在面试过程或者笔试过程中,也常用来与上面几个字段混淆。
session是保存在服务器端的。思想跟cookie有点像,后端也常session来保存用户的登录信息状态。(由于博主以学前端为主,所以这一块感兴趣的同学,可以再查阅相应的资料进行进一步的了解)
emm, 还有,博主一直没放弃自己的公众号,虽然更新频率没有非常大,但是如果写了相应的文章就会进行相应的记录,希望能跟大家一起学习进步,期待您的关注!