前端日常开发中，cookie和webStorage是常用的浏览器缓存方式。但是同时涉及到cookie、session、sessionStorage和localStorage，是不是有点傻乎乎的不清楚？本文总结了它们的区别和应用场景，相信对你的面试和实际应用会有帮助。cookie由服务端生成，保存在客户端（由于前后端交互，安全性差，浪费带宽）。存储大小有限（最多4kb）。存储内容只接受String类型。在内存中，它会在浏览器关闭后被销毁。如果设置了过期时间，则会保存在系统硬盘中，直到过期时间结束才会消失（即使关闭浏览器）。数据操作不便，原生界面不友好。需要自己封装应用场景判断用户是否登录过该网站，以便下次登录时自动登录（或者记住密码）？保存登录时间、浏览次数等信息，哪里设置了过期时间的cookie？Mac:/Users/username/Library/caches/Google/Chrome/Default/cacheWindows:C:\Users\username\AppData\LocalMicrosoft\Windows\TemporaryInternetFilesession是后端关心的，依赖于cookie(sessionID)存放在cookie）存储在服务器上。无限存储大小支持任意类型的存储内容存储位置：服务器内存，如果访问次数多，会影响服务器性能与传统的cookie客户端存储方式相比，webStorage有很多优点：保存在客户端，不与服务器通信，因此比cookie更安全、更快速。存储空间有限，但比cookie大（5MB），只支持String类型的存储内容（同cookie）html5提供原生接口，数据操作比cookiesetItem(key,value)保存数据更方便，并以键值对的形式存储信息。getItem(key)获取数据，传入key值，即可获取对应的值。removeItem(key)删除单条数据，根据key值移除对应的信息。clear()删除所有数据key(index)获取一个索引的keylocalStorage的持久化本地存储，浏览器关闭再打开数据仍然存在（除非数据被手动删除）。应用场景：长期登录，判断用户是否已经登录，适用于本地数据的长期存储。存储文件夹：Mac：/Users/Username/Library/ApplicationSupport/Google/Chrome/Default/LocalStroageWindows：C:\UsersUsername\AppData\Local\Google\Chrome\UserData\Profile\LocalStoragesessionStorageBrowse数据被破坏浏览器窗口关闭后。应用场景：敏感账号一次性登录。小结综上所述，我们可以知道cookies和webStorage(localStorage,sessionStorage)是前端工程师关心的内容，而session是后端关心的。Cookies存储容量小，安全性差，数据操作界面不友好，而webStorage存储容量大，安全性高，数据界面友好。对于持久化存储，推荐使用localStorage。对于一次性会话存储，推荐使用sessionStorage。喜欢就点赞支持吧~
