10

在前端日常开发中 cookiewebStorage 是我们常用的浏览器缓存方式。但同时说起 cookiesessionsessionStoragelocalStorage 是不是有些傻傻分不清楚了?本文梳理概括了它们的区别及应用场景,相信对你的面试和实际应用都有一定帮助。

cookie

  • 由服务端生成,保存在客户端(由于前后端有交互,所以安全性差,且浪费带宽)
  • 存储大小有限(最大 4kb )
  • 存储内容只接受 String 类型
  • 保存位置:

    • 若未设置过期时间,则保存在 内存 中,浏览器关闭后销毁
    • 若设置了过期时间,则保存在 系统硬盘 中,直到过期时间结束后才消失(即使关闭浏览器)
  • 数据操作不方便,原生接口不友好,需要自己封装
  • 应用场景

    • 判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)
    • 保存登录时间、浏览次数等信息
设置了过期时间的cookie存在了哪里呢?
Mac: /Users/用户名/Library/caches/Google/Chrome/Default/cache
Windows: C:\Users\用户名\AppData\LocalMicrosoft\Windows\Temporary Internet Files

session

  • 是后端关心的内容,依赖于 cookie(sessionID 保存在cookie中)
  • 保存在服务端
  • 存储大小无限制
  • 支持任何类型的存储内容
  • 保存位置:服务器内存,若访问较多会影响服务器性能

webStorage

webStorage 是 html5 提供的本地存储方案,包括两种方式:sessionStoragelocalStorage。相比 cookie 这种传统的客户端存储方式,webStorage 有许多优点:

  • 保存在客户端,不与服务器通信,因此比 cookie 更安全、速度更快
  • 存储空间有限,但比 cookie 大(5MB)
  • 仅支持 String 类型的存储内容(和 cookie 一样)
  • html5 提供了原生接口,数据操作比 cookie 方便

    • setItem(key, value) 保存数据,以键值对的方式储存信息。
    • getItem(key) 获取数据,将键值传入,即可获取到对应的value值。
    • removeItem(key) 删除单个数据,根据键值移除对应的信息。
    • clear() 删除所有的数据
    • key(index) 获取某个索引的key
localStorage
  • 持久化的本地存储,浏览器关闭重新打开数据依然存在(除非手动删除数据)。
  • 应用场景:长期登录、判断用户是否已登录,适合长期保存在本地的数据。
存储文件夹:
Mac: /Users/用户名/Library/Application Support/Google/Chrome/Default/Local Stroage
Windows: C:\Users用户名\AppData\Local\Google\Chrome\User Data\Profile\Local Storage
sessionStorage
  • 浏览器窗口关闭后数据被销毁。
  • 应用场景:敏感账号一次性登录。

总结

综上所述,我们可以知道,cookiewebStorage( localStorage、sessionStorage )是前端工程师关心的内容,session 是后端关心的内容。
cookie 存储量小、安全性差、数据操作接口不友好,而 webStorage 存储量较大、安全性较高、数据接口友好。
若要持久的存储方式,推荐使用 localStorage
若要一次性会话的存储,推荐使用 sessionStorage

看完有收获吗?喜欢请点赞支持哦~


Chen
718 声望47 粉丝

若你喜欢怪人 其实我很美