cookie、session、sessionStorage、localStorage 之间的区别及应

nidaye 发布于2019-08-23 10:28 / 1630人阅读

摘要：获取数据，将键值传入，即可获取到对应的值。删除单个数据，根据键值移除对应的信息。存储文件夹用户名用户名浏览器窗口关闭后数据被销毁。存储量小安全性差数据操作接口不友好，而存储量较大安全性较高数据接口友好。

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

cookie

由服务端生成，保存在客户端（由于前后端有交互，所以安全性差，且浪费带宽）

存储大小有限（最大 4kb )

存储内容只接受 String 类型

保存位置：

若未设置过期时间，则保存在内存中，浏览器关闭后销毁

若设置了过期时间，则保存在 系统硬盘 中，直到过期时间结束后才消失（即使关闭浏览器）

数据操作不方便，原生接口不友好，需要自己封装

应用场景

判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）

保存登录时间、浏览次数等信息

设置了过期时间的cookie存在了哪里呢？
 Mac:  /Users/用户名/Library/caches/Google/Chrome/Default/cache
 Windows:  C:Users用户名AppDataLocalMicrosoftWindowsTemporary Internet Files

session

是后端关心的内容，依赖于 cookie（sessionID 保存在cookie中）

保存在服务端

存储大小无限制

支持任何类型的存储内容

保存位置：服务器内存，若访问较多会影响服务器性能

webStorage

webStorage 是 html5 提供的本地存储方案，包括两种方式：sessionStorage 和 localStorage。相比 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用户名AppDataLocalGoogleChromeUser DataProfileLocal Storage

sessionStorage

浏览器窗口关闭后数据被销毁。

应用场景：敏感账号一次性登录。

总结

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

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

GPU云服务器云服务器 cookies和session的区别 session与cookie的区别 cookie和session的区别 session和cookie的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96366.html

Javascript本地存储小结

摘要：不是很安全，别人可以分析存放在本地的并进行欺骗，考虑到安全应当使用。因此不是一种持久化的本地存储，仅仅是会话级别的存储。用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。前言总括：详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法。人生如画，岁月如歌。原文博客地址：Javascript本地存储小结知乎专栏&&简书专题：前端...

garfileo 2019-08-20 12:19 评论0 收藏0
Cookie&Session、LocalStorage&SessionStorage

摘要：那要是被删了呢那没办法了，只能重新登陆，意味着重新提交重新分配随机数。它是一个哈希，作用就是字面意思，本地存储，只不过这里的本地指的是浏览器。标签可以保留回车和空格等你怎么写它就怎么展示的内容 cookie cookie可以看作是一种设置，允许浏览器在电脑本地硬盘的某一个隐蔽的地方开发一块存储空间，用来存放某些特定的内容。如果在服务器端设置了允许使用cookie，那么，之后浏览器每...

twohappy 2019-08-23 13:58 评论0 收藏0
浅谈cookie，session和localStorage，sessionStorage的区别

摘要：保持状态保存在浏览器端，保存在服务器端存储的大小单个保存的数据不能超过大小没有限制。的目的是克服由所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。的生命周期是仅在当前会话下有效。写在前面既然是浅谈，就不会详细从底层原理解释这几个的区别，就简单地聊一下，这几个的区别，优缺点，应用场景 cookie和session 浏览器的缓存机制提供了可以将用户数据存...

frolc 2019-08-23 13:43 评论0 收藏0
localStorage、sessionStorage、Cookie的区别及用法

摘要：的区别及用法是本地存储，存储在客户端，包括和。仅在当前会话下有效，关闭页面或浏览器后被清除。源生接口可以接受，亦可再次封装来对和有更好的支持。但需要程序员自己封装，源生的接口不友好。每个最多只能有条，每个长度不能超过。 localStorage、sessionStorage、Cookie的区别及用法 showImg(https://segmentfault.com/img/bVYLlH...

sf_wangchong 2019-08-21 17:41 评论0 收藏0