localStorage、sessionStorage、cookie区别

news2024/11/29 4:04:33
  1. localStorage: localStorage 的生命周期是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据,否则数据永远不会消失

  2. sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的

  3. cookie: cookie生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制(各浏览器不同),一般不能超过20个。缺点是不能储存大数据且不易读取

正文Cookie数据生命性:一般由服务器生成,可设置失效时间。(也可以由客户端生成)存放数据大小: 一般大小不能超过4KB作用域:Cookie的作用域仅仅由domain和path决定,与协议和端口无关与服务器端通信:浏览器每次向服务器发出请求,就会自动把当前域名下所有未过期的Cookie一同发送到服务器(会带来额外的性能开销)易用性:缺乏数据操作接口(document.cookie)。适用场景:只有那些每次请求都需要让服务器知道的信息(保持用户的登录状态),才应该放在 Cookie 里面。localStorage数据生命性::存储在 localStorage 的数据可以长期保留;存放数据大小: 一般为5MB作用域:localStorage的作用域是限定在文档源级别的。文档源通过协议、主机名以及端口三者来确定。与服务器端通信:不会自动把数据发给服务器,仅在本地保存。易用性:有很多易用的数据操作接口,比如setItem、getItem、removeItem适用场景:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据sessionStorage数据生命性:sessionStorage 里面的数据在页面会话结束(关闭对应浏览器标签或窗口)时会被清除。存放数据大小: 一般为5MB作用域:sessionStorage的作用域也是限定在文档源级别。但需要注意的是,如果相同文档源的页面渲染在不同的标签中,sessionStorage的数据是无法共享的。与服务器端通信:不会自动把数据发给服务器,仅在本地保存。易用性:有很多易用的数据操作接口,比如setItem、getItem、removeItem适用场景:敏感账号一次性登录;Web Storage (localStorage、sessionStorage)的优势存储空间更大更节省流量(没有额外性能开销)获取数据从本地获取会比服务器端获取快得多,所以显示更快IndexedDB(补充内容)IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。

IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。

IndexedDB储存空间大,一般来说不少于 250MB,甚至没有上限。

IndexedDB不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

提供查找接口,还能建立索引

异步操作:IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1448065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【STM32 CubeMX】STM32中断体系结构

文章目录 前言一、中断体系的比喻二、中断的内部结构2.1 EXTI触发方式 2.2 NVIC2.3 cpu与中断2.4 外部中断控制器框图上升沿触发选择寄存器屏蔽/使能寄存器等待处理寄存器 2.5 中断优先级 总结 前言 一、中断体系的比喻 STM32中断体系如下图所示: 一座大型建筑物…

(二)【Jmeter】专栏实战项目靶场drupal部署

该专栏后续实战示例,都以该篇部署的项目展开操作。 前置条件 参考“(一)【Jmeter】JDK及Jmeter的安装部署及简单配置” 安装部署Jmeter,从文章最后下载“Postman、Rancher.ova、VirtualBox-7.0.12-159484-Win.exe、Xshell-7.0.01…

VUE学习——表单的输入绑定

使用【v-model】。 输入框 <template><h1>表单输入绑定</h1><input type"text" v-model"message"><p>输入的值&#xff1a;{{ message }}</p> </template> <script>export default{data(){return{messa…

java 数据结构ArrayList类

目录 什么是List 线性表 顺序表 ArrayList类 ArrayList无参方法 ArrayList有参方法 &#xff1f;通配符 ArrayList 的remove方法 ArrayList 的subList方法 Iterator&#xff1a;迭代器 使用ArrayList完成杨辉三角 什么是List 在集合框架中&#xff0c;List是一个接…

FileZilla Server 1.8.1内网搭建

配置环境服务器服务器下载服务器配置服务器配置 Server - ConfigureServer Listeners - Port 协议设置 Protocols settingsFTP and FTP over TLS(FTPS) Rights management(权利管理)Users(用户) 客户端建立连接 配置环境 服务器处于局域网内: 客户端 < -访问- > 公网 &l…

猫头虎分享已解决Bug || Invariant Violation in React: Element Type is Invalid ‍

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

HarmonyOS鸿蒙学习基础篇 - 自定义组件(一)

前言 在ArkUI中&#xff0c;UI显示的内容均为组件&#xff0c;由框架直接提供的称为系统组件&#xff0c;由开发者定义的称为自定义组件。在进行 UI 界面开发时&#xff0c;通常不是简单的将系统组件进行组合使用&#xff0c;而是需要考虑代码可复用性、业务逻辑与UI分离&#…

987. 二叉树的垂序遍历 - 力扣(LeetCode)

题目描述 给你二叉树的根结点 root &#xff0c;请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言&#xff0c;其左右子结点分别位于 (row 1, col - 1) 和 (row 1, col 1) 。树的根结点位于 (0, 0) 。 二叉树的 垂序遍历 从最左边的列开始直到…

代码随想录算法训练营第46天|198.打家劫舍、213.打家劫舍II、337.打家劫舍III

文章目录 198.打家劫舍思路代码 213.打家劫舍II思路代码 337.打家劫舍III思路代码 198.打家劫舍 题目链接&#xff1a;198.打家劫舍 文章讲解&#xff1a;代码随想录|198.打家劫舍 思路 1.dp[i]:从0打劫到i所获得的最高金额 2.是否打劫第i个决定了dp[i]&#xff1a;如果打劫则…

Unity类银河恶魔城学习记录7-4 P70 Improving sword‘s behaviour源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Sword_Skill_Controller.cs using System.Collections; using System.Colle…

浅谈Linux环境

冯诺依曼体系结构&#xff1a; 绝大多数的计算机都遵守冯诺依曼体系结构 在冯诺依曼体系结构下各个硬件相互配合处理数据并反馈结果给用户 其中控制器和运算器统称为中央处理器&#xff08;CPU&#xff09;&#xff0c;是计算机硬件中最核心的部分&#xff0c;像人类的大脑操控…

【记录】记一次关于前端单元测试的全英文问卷调查( Survey: Automatically Generated Test Suites for JavaScript)

文章目录 OPENING STATEMENTBackgroundTask background: Fix the failing test casesBefore the task: Task: Fix the failing test casesTask: Executable DocumentationBefore the task: Bonus Opportunity: One more taskTask: Test Cases ClusteringRewardThank You! 原地址…

RocketMQ与Kafka架构深度对比

在分布式系统中&#xff0c;消息中间件扮演着至关重要的角色&#xff0c;它们负责在系统组件之间传递消息&#xff0c;实现解耦、异步通信和流量削峰等功能。RocketMQ与Kafka作为两款流行的消息中间件&#xff0c;各自拥有独特的架构设计和功能特性。本文将深入对比分析RocketM…

【机器学习300问】22、什么是超参数优化?常见超参数优化方法有哪些?

在之前的文章中&#xff0c;我主要介绍了学习率 η和正则化强度 λ 这两个超参数。这篇文章中我就主要拿这两个超参数来进行举例说明。如果想在开始阅读本文之前了解这两个超参数的有关内容可以参考我之前的文章&#xff0c;文章链接为你放在了这里&#xff1a; 【机器学习300…

算法沉淀——哈希算法(leetcode真题剖析)

算法沉淀——哈希算法 01.两数之和02.判定是否互为字符重排03.存在重复元素04.存在重复元素 II05.字母异位词分组 哈希算法&#xff08;Hash Algorithm&#xff09;是一种将任意长度的输入&#xff08;也称为消息&#xff09;映射为固定长度的输出的算法。这个输出通常称为哈希…

2024.2.8

1. 现有文件test.c\test1.c\main.c,编写Makkefile Makefile&#xff1a; CCgcc EXEa.out OBJS$(patsubst %.c,%.o,$(wildcard *.c)) CFLAGS-c -oall:$(EXE)$(EXE):$(OBJS)$(CC) $^ -o $%.o:%.c$(CC) $(CFLAGS) $ $^.PHONY:cleanclean:rm $(OBJS) $(EXE) 2. C编程实现&#x…

HarmonyOS鸿蒙学习基础篇 - Column/Row 组件

前言 Row和Column组件是线性布局容器&#xff0c;用于按照垂直或水平方向排列子组件。Row表示沿水平方向布局的容器&#xff0c;而Column表示沿垂直方向布局的容器。这些容器具有许多属性和方法&#xff0c;可以方便地管理子组件的位置、大小、间距和对齐方式。例如&#xff0c…

netstat命令

netstat 是一个计算机网络命令行工具&#xff0c;用于显示网络连接、路由表和网络接口等网络相关信息。netstat 命令可以在各种操作系统上使用&#xff0c;包括 Windows、Linux 和 macOS 等。 在使用 netstat 命令时&#xff0c;可以提供不同的选项来显示不同类型的网络信息。…

【北邮鲁鹏老师计算机视觉课程笔记】08 texture 纹理表示

【北邮鲁鹏老师计算机视觉课程笔记】08 texture 纹理表示 1 纹理 规则和不规则的 2 纹理的用处 从纹理中恢复形状 3 分割与合成 4 分析纹理进行分类 通过识别纹理分析物理性质 如何区分纹理 5 寻找有效的纹理分类方法 发现模式、描述区域内模式 A对应图2 B对应图…

Linux命令行全景指南:从入门到实践,掌握命令行的力量

目录 知识梳理思维导图&#xff1a; linux命令入门 为什么要学Linux命令 什么是终端 什么是命令 关于Linux命令的语法 tab键补全 关于命令提示符 特殊目录 常见重要目录 /opt /home /root /etc /var/log/ man命令 shutdown命令 history命令 which命令 bash…