前端缓存的几种方式

前端开发中常用的存储方法(带解析) 前端存储是指在浏览器端存储数据的方法。以下是一些常见的前端存储方法及其详细介绍和解析: 阅读详情

缓存/localstorage/sessionstorage/cookie/indexedDB

共同点:都是保存在浏览器端、且同源的

三者区别:

1、cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器

间来回传递,而 sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。
cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下

2、存储大小限制也不同,cookie 数据不能超过 4K,同时因为每次 http 请求都会携带 cookie、
所以 cookie 只适合保存很小的数据,如会话标识。sessionStorage 和 localStorage 虽然也有存 储大小的限制,
但比 cookie 大得多,可以达到 5M 或更大。

3、数据有效期不同

sessionStorage:仅在当前浏览器窗口关闭之前有效;

localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;

cookie:只在设置的 cookie 过期时间之前有效,即使窗口关闭或浏览器关闭

4、作用域不同

sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面;

localstorage 在所有同源窗口中都是共享的;

cookie 也是在所有同源窗口中都是共享的

5.indexedDB: 它是NoSQL数据库,用键值对进行存储,可以进行快速读取操作

web前端入门到实战:Tab切换以及缓存页面处理的几种方式 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) //通过点击就可以实现两个组件来回切换 <button @click="changeView">切换view</button> <component :is="currentV... 阅读详情

相关推荐

【NVIDIA Jetson Orin系列 - 安装NVIDIA SDK Manager】

NVIDIA Jetson Orin - 安装NVIDIA SDK Manager

dally2的博客 2691

前端常见的三种缓存方式

前端的缓存方式

xinxin_csdn的博客 5594

别再纠结VS还是VSCode了!新手C#环境搭建保姆级指南(含.NET Core安装验证)

本文为C#新手提供Visual Studio与VS Code的深度对比及环境搭建指南,涵盖.NET Core安装验证、工具选择决策框架及实战配置技巧。帮助开发者根据项目需求选择合适工具,快速搭建高效开发环境,提升编码效率。

weixin_30455023的博客 561

浅谈常见浏览器缓存方法(前端缓存)

浏览器缓存时浏览器保存数据用于快速读取或避免请求重复资源,提升网页加载速度. 前端缓存可分为两大类:http缓存和浏览器缓存 一.http缓存 http缓存指的是:当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要求资源"的副本,就可以直接从浏览器缓存中提取,而不是从原始服务器中提取这个资源 常见的htttp缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力, http缓存都是从第二次请求开始的,第一次请求资源时,服务器返回资源,并在respone hearder头中回传资源的

Angel_Tears_的博客 7155

Labview数据存储与读取——TDMS文件的创建与写入

Labview数据存储与读取——TDMS文件的创建与写入 你好,这是我在自学Labview编写软件过程中使用的一些功能。我在存储采集卡数据时,通过阅读大量他人的程序,发现TDM及TDMS文件十分适合波形数据的记录,TDMS文件比TDM文件在存储动态类型数据时读写速度更快,而且TDMS 文件没有容量限制,适合存储数据量庞大的测试数据。 前言少叙,书归正传 这一篇博客,说明一下如何使用基本的TDMS功能实现数据文件的存储。 所需要的控件如上图所示,在程序框图——编程——文件I\O——TDMS 中,写入TDMS

滑板小帅程序开发 2万+

STM32CubeMX最新版下载安装全攻略(附官网访问问题解决方案)

本文提供了STM32CubeMX最新版的详细下载与安装指南,并针对国内开发者常见的官网访问缓慢、注册验证邮件延迟等问题,给出了实用的解决方案和备选策略。通过清晰的步骤解析,帮助用户快速部署这一强大的STM32图形化配置工具,从而高效启动嵌入式开发项目。

weixin_28256233的博客 194

前端性能优化(三)——浏览器九大缓存方法

浏览器九大缓存方法

张伟的专栏 4029

【开源训练数据集2】10个最适合机器学习的股票市场数据集

​随着加密货币在世界各地的兴起,人们现在有比以往更多的投资方式。然而,这并不像低买高卖那么简单。如果你能准确预测股市,你就会成为地球上最富有的人之一。因此,之前已经有关于如何利用情绪分析来预测股市的研究。对于那些希望构建类似预测模型的人,本文将介绍 10 个用于机器学习的股票市场和加密货币数据集。

u010542847的博客 2139

localStorage、sessionStorage、cookie 的区别

localStorage、sessionStorage、cookie 的区别

qq_58511059的博客 304

blenderproc 制作位姿估计数据集

blenderproc 制作位姿估计数据集 准备工作 1.首先需要去下载blenderproc的源码blenderproc,按照作者的readme文件进行编译。 2.其次需要下载bop_toolkit源码,链接如下bop_toolkit 3.说明:blenderproc主要用来生成数据,包括depth,rgb,位姿标签文件(scene_gt.json),bop_toolkit主要用来生成mask和mask_visib,scene_gt_info.json,用于判断物体的可见区域比例,如果遮挡太多考虑去掉。做

qq_43814359的博客 5697

Avalonia 超级详细学习指南

什么是 Avalonia?Avalonia 是一个开源的、跨平台的 GUI 框架,允许开发者使用 XAML 和 C# 构建现代化、高性能的桌面应用程序。与其他框架相比,Avalonia 具有强大的跨平台能力和灵活的界面设计。} }()Avalonia 的特点和优势跨平台性:Avalonia 可以在 Windows、Linux、macOS 等多个平台上运行,开发者可以编写一套代码,然后在不同的操作系统上运行相同的应用程序。

仰望星空的博客 1万+

前端数据缓存的几种方式详细讲解

监控内存使用情况,避免过度缓存导致内存泄漏。建议结合业务需求选择缓存层级,并定期通过。

爱分享的程序员 1432

指纹浏览器降维打击(下):Cloudflare Turnstile 与 hCaptcha 的底层交互逻辑

本文将深度拆解:Turnstile 与 hCaptcha 的 Iframe 沙箱通信机制,动态混淆 JS 与 PoW(工作量证明)的物理破解法则,以及如何通过 C++ 底层事件合成与环境基因强绑定,实现验证码的“无感过验”。

数据知道的博客 421

[前端开发]几种你不得不了解的浏览器缓存设置方式

编者注:超融合产品化的道路,除了计算、存储、网络等后端能力的革命性变革,在用户体验上,也是一次重要变革。焱融超融合产品从后端到前端都践行“执简驭繁”的设计思想和理念。你以为这里只有云计算、存储、网络的最黑科技吗?NONONO,这里还有前端的黑科技高手为什么要用缓存在前端开发中,性能一直都是被大家所重视的重点,判断一个网站的性能最直观的就是看网页打开的速度,其中提高网站响应速度的一种方式就是使用浏览...

YAN_RONG_TECHNOLOGY的博客 4749

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

mysql前端的缓存_前端HTML5几种存储方式的总结

总体情况h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。主要应用:购物车、客户登录对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器1.本地存储localstorage存储方式:以键值对(Key-Value)的方式存储,永久存储,永不失效...

weixin_39654823的博客 130

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

uniapp滑动切换tab标签_Web前端,Tab切换,缓存,页面处理的几种方式

前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。1.如何切换使用动态组件,相信大家都能看懂(部分代码省略)//通过点击就可以实现两个组件来回切换 切换view import pageA from "@/views/pageA"; import pageB from "@/views/pageB"; comput...

weixin_40003780的博客 3522

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

前端本地缓存方式

前端缓存机制 cookie,session,localstorage,sessionstorage

derin1的博客 2196

【无标题】前端缓存

前端缓存

weixin_45027192的博客 161

前端存储都有哪些

html5 提供的一种浏览器本地存储的方法,它借鉴了服务端session的概念,代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据,它在当前窗口关闭后就失效了,并且sessionStorange只能被同一个窗口的同源页面所访问共享。它和sessionStorange不同的是,除非手动删除它,否则它不会失效,并且localStorage也只能被同源页面所访问共享。它的优点有缩短网页请求资源的距离,减少延迟、节省流量,由于缓存文件可以重复利用,减少服务器的压力,提高客户端的响应。

weixin_72324200的博客 660

ajax缓存

ajax在发送数据成功后,会把请求的URL和返回的结果保存在cache中,这样在下一次发送同样请求时,就能从缓存中将数据提取出来,以提高响应速度与用户体验,这种情况下不会与服务器交互。 好处: 在对一些静态资源的请求上,比如图片、js、css等,提高了速度,节省了网络资源 缺点: 请求变动的资源时返回的依旧是以前的结果。 禁止浏览器缓存的方法: 1.前端: ajax请求前加上 Cach...

weixin_30625691的博客 73

vue使用indexedDB缓存教程

前端采用indexedDB缓存

m0_56104994的博客 1423

HTML5有哪些缓存方式

API:1.localstorege.setItem(key,value),键值对的形式缓存2.localstorege.getItem(key),根据键名来缓存值3.localstorege.length ,获取总缓存数量。

subsistent的博客 3812

No11.精选前端面试题,享受每天的挑战和学习

在Vue中,data选项可以是一个函数或一个对象。通常情况下,推荐将data定义为一个函数。data被定义为一个函数的主要原因是为了保证每个组件实例都能拥有独立的数据副本,而不是共享同一个数据引用。当data选项是一个对象时,所有组件实例会共享同一个data对象,这可能导致状态的交叉污染和数据共享问题。将data定义为一个函数可以解决这个问题,每次创建组件实例时,Vue会调用该函数来获取真实的数据对象,确保每个组件实例都拥有独立的数据副本。这样做的好处是,每个组件实例的数据都是相互隔离的,互不影响。

你若盛开,清风自来 167

详解cookie、session和HTTP缓存

1. cookie 1.1 什么是 cookie? HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 cookie,指网站为了辨别用户身份而储存在用户本地终端上的数据。cookie 本质上是 HTTP 的一个内容(请求头)。 在前端工作中,可以这么理解 coo...

weixin_33897722的博客 618

详细介绍缓存的几种方式

对于Web前端而言,cache可以说是无处不在,通常是2个环节之间,就会引入一个cache做为提升整体效率的角色。例如A和B两者之间的数据交换,为了提升整体的效率,引入角色C,而C被用于当做热点数据的存储,或者是某种中间处理的机制。 也就是我们常常说的“空间换时间”,牺牲一部分代价,来换取整体效率的提升。 那么我们一起来看看前端当中,有那些比较关键的缓存?它们又是怎样协调工作的呢?我们一起来看...

qq_25461519的博客 3346

前端本地存储有哪些?

4kb, 多用于存储用户登录相关信息,不是很安全,通常和session Id 配合使用,本地发起请求时,服务器会将信息存储在session中,并将session id 以set-cookie的方式返回给客户端,下次服务器发起请求时,会自动将session id放在请求头中发给服务器校验登录,但是当遇到并非所有请求都会送至同一台服务器时,就会被认为未登录;允许存储大量数据,每条数据都有唯一的key,非关系型数据库 可以通过索引进行查询,不可跨域,可以存储离线缓存数据。

m0_60508873的博客 208
上一篇: div水平垂直居中
下一篇: vite webpack原理和区别
阿芯爱编程
博客等级 码龄10年 479粉丝 213原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值