摘要:获取数据,将键值传入,即可获取到对应的值。删除单个数据,根据键值移除对应的信息。存储文件夹用户名用户名浏览器窗口关闭后数据被销毁。存储量小安全性差数据操作接口不友好,而存储量较大安全性较高数据接口友好。
在前端日常开发中 cookie、webStorage 是我们常用的浏览器缓存方式。但同时说起 cookie、session、sessionStorage 和 localStorage 是不是有些傻傻分不清楚了?本文梳理概括了它们的区别及应用场景,相信对你的面试和实际应用都有一定帮助。
cookie由服务端生成,保存在客户端(由于前后端有交互,所以安全性差,且浪费带宽)
存储大小有限(最大 4kb )
存储内容只接受 String 类型
保存位置:
若未设置过期时间,则保存在 内存 中,浏览器关闭后销毁
若设置了过期时间,则保存在 系统硬盘 中,直到过期时间结束后才消失(即使关闭浏览器)
数据操作不方便,原生接口不友好,需要自己封装
应用场景
判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)
保存登录时间、浏览次数等信息
设置了过期时间的cookie存在了哪里呢?session
Mac: /Users/用户名/Library/caches/Google/Chrome/Default/cache
Windows: C:Users用户名AppDataLocalMicrosoftWindowsTemporary Internet Files
是后端关心的内容,依赖于 cookie(sessionID 保存在cookie中)
保存在服务端
存储大小无限制
支持任何类型的存储内容
保存位置:服务器内存,若访问较多会影响服务器性能
webStoragewebStorage 是 html5 提供的本地存储方案,包括两种方式:sessionStorage 和 localStorage。相比 cookie 这种传统的客户端存储方式,webStorage 有许多优点:
保存在客户端,不与服务器通信,因此比 cookie 更安全、速度更快
存储空间有限,但比 cookie 大(5MB)
仅支持 String 类型的存储内容(和 cookie 一样)
html5 提供了原生接口,数据操作比 cookie 方便
setItem(key, value) 保存数据,以键值对的方式储存信息。
getItem(key) 获取数据,将键值传入,即可获取到对应的value值。
removeItem(key) 删除单个数据,根据键值移除对应的信息。
clear() 删除所有的数据
key(index) 获取某个索引的key
持久化的本地存储,浏览器关闭重新打开数据依然存在(除非手动删除数据)。
应用场景:长期登录、判断用户是否已登录,适合长期保存在本地的数据。
存储文件夹:
Mac: /Users/用户名/Library/Application Support/Google/Chrome/Default/Local Stroage
Windows: C:Users用户名AppDataLocalGoogleChromeUser DataProfileLocal Storage
浏览器窗口关闭后数据被销毁。
应用场景:敏感账号一次性登录。
总结综上所述,我们可以知道,cookie 和 webStorage( localStorage、sessionStorage )是前端工程师关心的内容,session 是后端关心的内容。
cookie 存储量小、安全性差、数据操作接口不友好,而 webStorage 存储量较大、安全性较高、数据接口友好。
若要持久的存储方式,推荐使用 localStorage
若要一次性会话的存储,推荐使用 sessionStorage
看完有收获吗?喜欢请点赞支持哦~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96366.html
摘要:不是很安全,别人可以分析存放在本地的并进行欺骗,考虑到安全应当使用。因此不是一种持久化的本地存储,仅仅是会话级别的存储。用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法。 人生如画,岁月如歌。 原文博客地址:Javascript本地存储小结 知乎专栏&&简书专题:前端...
摘要:那要是被删了呢那没办法了,只能重新登陆,意味着重新提交重新分配随机数。它是一个哈希,作用就是字面意思,本地存储,只不过这里的本地指的是浏览器。 标签可以保留回车和空格等你怎么写它就怎么展示的内容 cookie cookie可以看作是一种设置,允许浏览器在电脑本地硬盘的某一个隐蔽的地方开发一块存储空间,用来存放某些特定的内容。 如果在服务器端设置了允许使用cookie,那么,之后浏览器每...
摘要:保持状态保存在浏览器端,保存在服务器端存储的大小单个保存的数据不能超过大小没有限制。的目的是克服由所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。的生命周期是仅在当前会话下有效。 写在前面 既然是浅谈,就不会详细从底层原理解释这几个的区别,就简单地聊一下,这几个的区别,优缺点,应用场景 cookie和session 浏览器的缓存机制提供了可以将用户数据存...
摘要:的区别及用法是本地存储,存储在客户端,包括和。仅在当前会话下有效,关闭页面或浏览器后被清除。源生接口可以接受,亦可再次封装来对和有更好的支持。但需要程序员自己封装,源生的接口不友好。每个最多只能有条,每个长度不能超过。 localStorage、sessionStorage、Cookie的区别及用法 showImg(https://segmentfault.com/img/bVYLlH...
阅读 3895·2021-11-23 10:09
阅读 1286·2021-11-23 09:51
阅读 2910·2021-11-23 09:51
阅读 1529·2021-09-07 09:59
阅读 2286·2019-08-30 15:55
阅读 2217·2019-08-30 15:55
阅读 2893·2019-08-30 15:52
阅读 2501·2019-08-26 17:04