前端存储都有哪些

news2024/11/13 8:16:08

cookie 、sessionStorage、localStorange、http缓存 、indexDB

cookie

由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服务器端。cookie最多能存储4K数据,它的生存时间由expires属性指定,并且cookie只能被同源的页面访问共享。

localStorage

html5 提供的一种浏览器本地存储的方法,它一般也能够存储5M或者更大的数据。它和sessionStorange不同的是,除非手动删除它,否则它不会失效,并且localStorage也只能被同源页面所访问共享。

SeeionStorange

html5 提供的一种浏览器本地存储的方法,它借鉴了服务端session的概念,代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据,它在当前窗口关闭后就失效了,并且sessionStorange只能被同一个窗口的同源页面所访问共享。

http缓存:

 优点:主要通过请求头和响应头的信息,来控制缓存的策略。它的优点有缩短网页请求资源的距离,减少延迟、节省流量,由于缓存文件可以重复利用,减少服务器的压力,提高客户端的响应。

缺点:缓存可能导致用户看到过期的内容,需要使用版本号或者文件指纹来解决。如果缓存策略不当,可能会造成资源更新后用户无法及时获取最新内容。

浏览器缓存分为:强缓存200、协商缓存304

区别: 强缓存不向服务器发送请求,协商缓存会发送请求至服务器

相同点:若命中,都直接从浏览器缓存加载资源,不从服务器加载资源

由响应头来控制缓存 :

强缓存:Expired 、catch-Control

浏览器在请求资源时,先检查该资源的缓存标识(例如ExpiresCache-Controlmax-age等),如果该资源在缓存有效期内,则直接使用缓存,不会向服务器发起请求。

协商缓存:(请求头+响应头) :Last-Modifired 、Etag

当资源的缓存过期或者需要验证时,浏览器会向服务器发送请求,服务器会根据资源的最后修改时间(Last-Modified)或者资源的唯一标识(ETag)来判断资源是否有更新。

强缓存的资源存储位置

状态Network - Size含义
200from memory cache不请求网络资源,资源在内存, 一般是脚本、字体、图片,浏览器关闭,数据将被释放
200from disk cache请求网络资源,资源在磁盘, 一般是css等,关闭数据还在
200资源大小从服务器下载最新资源
304报文大小请求服务端发现资源未更新,使用本地资源

用户行为对强缓存和协商缓存的影响

用户操作Expires/cache-control Last-modified/Etag
地址栏回车有效有效
页面链接跳转有效有效
新开窗口有效有效
前进回退有效有效
f5刷新无效有效
ctrl+f5强制刷新无效无效

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

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

相关文章

Mathematica训练课(46)-- 一些常用的画图函数

在前面的课程中,我们已经梳理了Plot的画图用法,今天就详细梳理一下其他的画图函数用法; 1. 画一条直线 2. Circle(圆) 3. Disk(圆盘) 4. 画出一个矩形 5. 箭头

MAS0902量产工具分享,MAS0902A开卡教程,MAS0901量产工具下载

MAS0902和MAS1102都是基于SATA3.2技术开发的DRAM-less SSD控制芯片,简单来说就是SATA协议无缓存主控。下面是我摸索的麦光黑金300 240G SSD开卡修复简易教程,也就是MAS0902量产过程: 注意:开卡转接线必须要用ASM1153E或JMS578主控…

Github Page 使用手册(保姆级教程!)

搭建个人网站?没有服务器?那不如尝试一下 Github Page ! 最近我正好在搭建个人网站,于是就写一篇博客来详细介绍 Github Page 的使用、部署方式吧! 一、进入 Github 访问:github.com 如果你没有 github…

Redisson(分布式锁、限流)

注意Redisson是基于Redis的&#xff0c;所以必须先引入Redis配置&#xff08;参考SpringBoot集成Redis文章&#xff09; 1. 集成Redisson 引入依赖 <!-- 二选一,区别是第一个自动配置&#xff0c;第二个还需要手动配置也就是第二步自定义配置&#xff0c;注意版本号&…

【吊打面试官系列-MyBatis面试题】MyBatis 框架适用场合?

大家好&#xff0c;我是锋哥。今天分享关于 【MyBatis 框架适用场合 &#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; MyBatis 框架适用场合&#xff1f; 1、MyBatis 专注于 SQL 本身&#xff0c;是一个足够灵活的 DAO 层解决方案。 2、对性能的要求很高&#…

苹果电脑移动硬盘不能写入怎么办 读取移动硬盘的磁盘管理软件 Paragon NTFS for Mac永久激活

对于使用苹果电脑的用户们&#xff0c;我们经常会使用到移动硬盘来拷贝大量的文件。一般的移动硬盘的容量都比较大&#xff0c;再加上国内大多数人使用的都是 Windows 系统&#xff0c;为了通用与方便&#xff0c;所以硬盘的分区一般都是 NTFS 格式的。对于 Windows 系统的 NTF…

LLDP 基本原理

LLDP 简介 定义 LLDP&#xff08;Link Layer Discovery Protocol&#xff0c;链路层发现协议&#xff09;是 IEEE 802.1ab 中定义的第二层发现&#xff08;Layer 2 Discovery&#xff09;协议。 LLDP 提供了一种标准的链路层发现方式&#xff0c;可以将本端设备的主要能力、…

西安高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

随着工业4.0时代的到来&#xff0c;智能制造成为推动制造业转型升级的关键。为了培养学生的创新能力和实践能力&#xff0c;西安高校大学决定建设智能制造实验室&#xff0c;并引入数字孪生技术&#xff0c;构建可视化系统平台。项目旨在通过数字孪生技术&#xff0c;实现对制造…

【吴恩达深度学习笔记系列】Logistic Regression 【理论】

Binary Classification: Logistic Regression: y ^ σ ( w T x b ) \hat{y}\sigma{(w^T xb)} y^​σ(wTxb) using sigmoid function σ 1 1 e − z \sigma \frac{1}{1e^{-z}} σ1e−z1​. 【torch.sigmoid(x)】 Sigmoid ( x ) 1 1 e − x \text{Sigmoid}(x)\frac{1}{…

运维锅总详解Nginx

本文尝试从Nginx特性及优缺点、为什么具有文中所述的优缺点、Nginx工作流程、Nginx最佳实践及历史演进等角度对其进行详细分析。希望对您有所帮助。 Nginx特性及优缺点 Nginx简介 Nginx&#xff08;发音为 “engine-x”&#xff09;是一款高性能的开源Web服务器及反向代理服…

[OtterCTF 2018]Play Time

还是这个程序 。。要找到游戏名字查看 进程 psscan pstree pslist 0x000000007d686b30 Rick And Morty 3820 2728 0x000000000b59a000 2018-08-04 19:32:55 UTC0000 0x000000007d7cb740 LunarMS.exe 708 2728 0x00000000731cb000 2018-08-04 19:27:39 UTC0000…

安全架构概述_1.信息安全面临的威胁

在当今以计算机、网络和软件为载体的数字化服务几乎成为人类赖以生存的手段。与之而来的计算机犯罪呈现指数上升趋势&#xff0c;因此&#xff0c;信息的可用性、完整性、机密性、可控性和不可抵赖性等安全保障显得尤为重要&#xff0c;而满足这些诉求&#xff0c;离不开好的安…

【mysql的行记录格式】

记录头信息 除了变长字段长度列表、NULL值列表之外&#xff0c;还有一个用于描述记录的记录头信息&#xff0c;它是由固定的5个字节组成。5个字节也就是40个二进制位&#xff0c;不同的位代表不同的意思&#xff0c;如图&#xff1a; 记录的真实数据 对于record_format_demo表来…

操作系统期末复习考题二

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文☀️☀️☀️三、总结&#x1f353;&#x1f353;&#x1f353; 一、前言&#x1f680;&#x1f680;&am…

算法-位运算基础

文章目录 前置知识1. 交换两个数2. 比较两个数的大小3. leetcode268 寻找缺失的数字4. leetcode136 只出现一次的数字5. leetcode260 只出现一次的数字|||6. leetcode137 只出现一次的数字||7. 2/3的幂8. 大于等于该数字的最小2的幂9. leetcode201 数字范围按位与10. 位运算中分…

JAVA笔试题目

1.标识符的使用 2.类名和java文件名的关系 3.java数据类型关系 4.循环体的考验 答案选择C&#xff0c;D的话需要在do前面加上loop:表示跳出当前循环体。 5.三元运算符的类型运算 6.局部变量的使用 这里需要注意的是c表示当前行代码还是使用原来的数值&#xff0c;下一行代码才…

fiddler抓包工具

概念 概念&#xff1a; Fiddler是一个http协议调试代理工具&#xff0c;它能够记录并检查所有你的电脑和互联网之间的http通讯。 http&#xff1a;不加密&#xff0c;端口为80 https&#xff1a;加密&#xff0c;端口为443 原理&#xff1a; 其实就在访问服务器时&#xff0…

005-GeoGebra基础篇-GeoGebra的矩形

上一篇关于点的介绍已经触及到了诸多GeoGebra的基础操作&#xff0c;这一篇我们根据画矩形&#xff0c;继续探索GeoGebra。 目录 一、最粗暴的方式绘制矩形1. 使用“Polygon”工具直接绘制2. 注意看代数列表3. 关于矩形和线段 二、用点和线段绘制矩形&#xff08;1&#xff09;…

CJSON库

目录 一、介绍 1、JSON是什么 2、为什么使用CJSON 3、JSON格式 二、使用CJSON构造JSON 1、创建对象 2、添加字段 3、转换格式 4、释放对象 三、使用CJSON解析JSON 1、解析数据 2、 获取字段 3、释放对象 一、介绍 1、JSON是什么 JSON是什么呢&#xff1f;JSON全称…

【Python3的内置函数和使用方法】

目录 Python 特点 Python 中文编码 Python 变量类型 Python列表 Python 元组 元组是另一个数据类型&#xff0c;类似于 List&#xff08;列表&#xff09; Python 字典 Python数据类型转换 Python 运算符 Python算术运算符 Python比较运算符 Python赋值运算符 Pyt…