cookie、sessionStorage、localStorage三者的区别

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css #开发语言

本文比较了cookie、sessionStorage和localStorage在存储大小、操作环境、时效性、便捷性和兼容性方面的差异，强调了各自的适用场景和特点。

1.存储大小

cookie只能存储4kb左右，sessionStorage和localStorage可以存储5M左右

2.操作环境

cookie前后端都可以操作，sessionStorage和localStorage只能前端操作

3.时效性

cookie可以设置过期时间，未设置过期时间就是会话级，sessionStorage是会话级，localStorage未手动删除会一直存在

4.便捷性

cookie需要自己封装方法，sessionStorage和localStorage直接使用即可

5.兼容性

cookie所有浏览器都可以使用，sessionStorage和localStorage在IE低版本不能使用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tangy_q__

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

深入理解Web存储机制：Cookie、SessionStorage与LocalStorage的区别

chaosweet的博客

01-13

1328

选择正确的工具是成功的开始。

【面试题】详解Cookie、localStorage、sessionStorage区别

金鳞踏雨

11-19

789

1、存储在localStorage中，每次调用接口的时候都把它当成一个字段传给后台 2、存储在cookie中，让它自动发送，不过缺点就是不能跨域 3、拿到之后存储在localStorage中，每次调用接口的时候放在HTTP请求头的Authorization字段里面。token 在客户端一般存放于localStorage、cookie、或sessionStorage中。

1 条评论您还未登录，请先登录后发表或查看评论

cookie 、sessionstorage 、localstorage三者的区别

weixin_45541388的博客

06-21

1万+

cookie、loacalstorage、sessionstorage的区别

cookie sessionStorage localStorage三者的区别？

qq_61342324的博客

10-10

147

sessionStorage 会话级 localStorage 只要不手动删除会一直存在。sessionStorage localStorage 在ie低版本不能使用。sessionStorage localStorage 只能前端操作。cookie 如果没有设置过期时间就是会话级也可以设置过期时间。sessionStorage localStorage 直接使用。sessionStorage localStorage 存储5M。cookie 只能在服务端环境操作前后端都可以操作。

cookie、localStorage和sessionStorage三者的区别

热门推荐

first_shun的博客

04-16

2万+

cookie、localstorage和sessionStorage三者都是在开发中用到的临时存储客户端会话信息或者数据的方法，下面就简单介绍一下三者的区别：一、存储的时间有效期不同 1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效 2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效 3、localStorage的有效期是在不进行手动删除的情况下是一直有效的二、存储的大小不同 1、cookie的存储是4kb左右，存储量较小，一般

Cookie、sessionStorage和localStorage的区别是什么？

Niucode的博客

01-14

1670

Cookie、sessionStorage和localStorage都是在浏览器中存储数据的方式，但它们有一些重要的区别。

cookie、localstorage和sessionStorage三者区别~

yuroll的博客

03-31

258

一、存储的时间有效期不同1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效3、localStorage的有效期是在不进行手动删除的情况下是一直有效的二、存储的大小不同1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)三、与服务端的通信。

cookie、sessionStorage、localStorage区别一文超详细整理

weixin_45709829的博客

04-05

3124

在上一篇博客中整理一些cookie sessionStorage localStorage的知识点梳理，学习之后在这篇文章中总结这三者的区别。本地存储三种方式cookie、localStorage、sessionStorage的详细介绍一、cookie、sessionStorage、localStorage存储、获取、删除等使用方法的区别（1）cookie 保存cookie值 var dataCookie = '110'; document.cookie = 'token' + '=' + data

cookie、sessionStorage和localStorage的区别

aliyun3的博客

04-25

1530

一、概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（

cookie、localStorage、sessionStorage的区别

weixin_43452154的博客

03-21

666

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在。都是保存在浏览器端、且同源的。

cookie，localStorage，SessionStorage三者应用场景

weixin_58195668的博客

05-28

883

一、cookie 1. cookie主要用于与服务器交互的存储，比如用户的登录信息，token令牌等。 2. 存储数据大小：限制在4kb左右。 3. 一般由服务器生成，可设置失效时间，一般都是页面关闭，或定时失效。 4. 存储数据类型：字符串类型的键值对。二、localStorage 1. localStorage本地存储，不进行清理会永久保存。 2. 有三个方法：setItem、getItem和removeItem。localStorage.setItem("key", "value

精选资源

cookie，localStorage,sessionStorage区别与应用

01-07

cookie localStorage sessionStorage 概念存放在客户端的一段文本信息存储在客户端的临时信息，只能存放字符串类型数据同localStorage 大小 4k 5M 5M 生命周期浏览器关闭，数据清空存在内存中，除非...

sessionStorage localStorage cookie三者区别

08-13

sessionStorage、localStorage和cookie都是在浏览器端存储数据的方式，但它们有一些区别。 1. 作用域： - sessionStorage：数据仅在单个会话期间有效，当用户关闭浏览器窗口时会被清除。 - localStorage：数据在...

JavaScript 根据数组对象的某个指定属性分组合并，并累加金额

最新发布

zhangyao940330的博客

12-15

164

item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。

javascript 性能优化实战：异步和延迟加载

小伙伴们全都Lucky！

12-11

976

本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。

商城后台管理系统 02 添加规格参数-动态表单

weixin_52943021的博客

12-15

198

Boolean。

第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）

2402_87628679的博客

12-11

980

gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。

ESM (ES Modules) 和 CJS (CommonJS)

Irene1991的博客

12-11

654

ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav

第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）

2402_87628679的博客

12-11

1264

对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';