当前位置: 首页 > news >正文

浏览器缓存sessionStorage、localStorage、Cookie

一、sessionStorage

1、简介

sessionStorage用于在浏览器会话期间存储数据,数据仅在当前会话期间有效。
存储的数据在用户关闭浏览器标签页或窗口后会被清除。

2、方法

  • 使用sessionStorage.setItem(key, value)方法将数据存储在sessionStorage中。
  • 使用sessionStorage.getItem(key)方法根据键获取存储的值。
  • 使用sessionStorage.removeItem(key)方法根据键删除存储的值。

3、代码示例

列表页搜索条件缓存, 使用sessionStorage实现简单的功能, 
存储数据+读取数据+清除数据
a、存取单个数据
sessionStorage.setItem("param", "我叫你一声你敢答应吗?");
let param = sessionStorage.getItem("param")
//我叫你一声你敢答应吗?
console.log(param ); 
b、存取对象
sessionStorage也可存储Json对象:
存储时,通过JSON.stringify()将对象转换为文本格式;
读取时,通过JSON.parse()将文本转换回对象。
sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
if (sessionStorage.getItem("queryParams")) {this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
}
c、清除数据
sessionStorage.removeItem("queryParams");

二、localStorage

1、简介

  •    localStorage用于在浏览器中永久存储数据,即使用户关闭浏览器标签页或窗口,数据仍然保留。
  • 存储的数据不会自动过期,除非显式地从代码中删除或用户清除浏览器缓存。
  • 存放数据大小一般为5MB;
  • 仅在浏览器中保存,不参与服务器通信;

2、方法

  1. 使用localStorage.setItem(key, value)方法将数据存储在localStorage中。
  2. 使用localStorage.getItem(key)方法根据键获取存储的值。
  3. 使用localStorage.removeItem(key)方法根据键删除存储的值。

3、代码示例

// 设置localStorage中的数据
localStorage.setItem('key', 'value');
// 获取localStorage中的数据
const value = localStorage.getItem('key');
console.log(value);  // 输出:value
// 删除localStorage中的数据
localStorage.removeItem('key');

1、简介

  • Cookie是一种在浏览器中存储数据的机制,用于跟踪和识别用户。
  • 可以设置Cookie的过期时间,使数据在指定时间后失效。
  • 即使用户关闭浏览器,存储在Cookie中的数据也可以保留,除非设置了过期时间。

2、方法

  1. 使用document.cookie属性进行设置和获取Cookie值。
  2. 使用document.cookie = "key=value; expires=expiration_time; path=/;"语法设置Cookie。
  3. 使用document.cookie获取所有Cookie值。
  4. 使用document.cookie = "key=; expires=expiration_time; path=/;"语法删除Cookie。

3、代码示例

// 设置cookie
document.cookie = "key=value; expires=expiration_time; path=/;";
// 获取所有cookie
const cookies = document.cookie;
console.log(cookies);
// 删除cookie
document.cookie = "key=; expires=expiration_time; path=/;";

四、三者区别

这些存储机制各有优劣和适用场景。sessionStorage适用于在会话期间保持数据,
localStorage适用于需要永久存储数据的场景,
而Cookie用于跟踪用户和设置过期时间的需求。根据具体的应用需求,选择适合的存储机制可以更好地管理和存储数据。

1、sessionStorage与localStorage区别

  • sessionStorage在浏览器会话期间有效,而localStorage是持久的。
  • sessionStorage在用户关闭浏览器标签页或窗口时会被清除,而localStorage会一直保留。
  • sessionStorage和localStorage的使用方法相似,都是使用setItem、getItem和removeItem方法进行操作。

2、sessionStorage、localStorage、cookie区别

  1. 存储容量:sessionStorage和localStorage都提供了大约5MB的存储空间,而Cookie只能存储4KB的数据。
  2. 生命周期:sessionStorage的数据在单个会话期间有效,关闭浏览器后数据将被清除;localStorage的数据是永久性的,除非手动清除或代码删除;Cookie可以设置过期时间,可以在指定时间之前保持有效。
  3. 存储位置:sessionStorage、localStorage和Cookie数据都存储在客户端,不涉及服务器。
  4. 存储机制:sessionStorage、localStorage和Cookie都使用键值对的方式存储数据。
  5. 跨窗口通信:sessionStorage和localStorage不支持跨窗口通信,而Cookie支持。
  6. 跨域名访问:sessionStorage和localStorage不支持跨域名访问,而Cookie支持。
  7. 浏览器支持:sessionStorage和localStorage在现代浏览器中得到支持,而Cookie在所有浏览器中都可用。
  8. 与服务器交互:sessionStorage、localStorage不会自动发送数据到服务器,而Cookie在每次HTTP请求中都会自动发送到服务器。
特性sessionStoragelocalStoragecookie
存储容量5MB5MB4KB
生命周期单个会话期间永久可设置
存储位置客户端客户端客户端
存储机制键值对键值对键值对
跨窗口通信不支持不支持支持
跨域名访问不支持不支持支持
浏览器支持现代浏览器现代浏览器所有浏览器
与服务器交互不自动发送不自动发送自动发送

相关文章:

浏览器缓存sessionStorage、localStorage、Cookie

一、sessionStorage 1、简介 sessionStorage用于在浏览器会话期间存储数据,数据仅在当前会话期间有效。 存储的数据在用户关闭浏览器标签页或窗口后会被清除。 2、方法 使用sessionStorage.setItem(key, value)方法将数据存储在sessionStorage中。使用sessionSt…...

易点易动固定资产管理系统场景应用一:集成ERP/财务系统

在企业的日常运营中,固定资产管理是一个重要而繁琐的任务。传统的手工管理方式往往效率低下且容易出错,给企业带来不必要的成本和风险。为了解决这一问题,易点易动固定资产管理系统应运而生。本文将重点介绍易点易动固定资产管理系统在集成ER…...

k8s部署elk8 直接通过logstash获取日志文件方式

配置文件 kibana [rootnode101 config]# cat kibana.yml # # ** THIS IS AN AUTO-GENERATED FILE ** ## Default Kibana configuration for docker target server.host: "0.0.0.0" server.shutdownTimeout: "5s" elasticsearch.hosts: [ "http:/…...

git 本地多个账号错乱问题解决

当我们在本地有多个git账号时,例如公司的gitlab有一个git账号,自己的开源项目有一个GitHub账号,我们可能会出现账号错乱的情况,例如提交到公司gitlab的代码是github账号 这种情况通常是由于您的git config配置文件中的用户信息未…...

wu-ui-uniapp 多平台快速开发的UI框架

WU-UI 多平台快速开发的UI框架(无论平台,一致体验) 官方群 wu-ui官方1群: 767943089 说明 wu-ui(如虎添翼) 是 全面兼容多端的uniapp生态框架,基于vue2、vue3和nvue开发。丰富组件库,便捷工具库,简单高效。无论平台&#x…...

Spring Boot Actuator:自定义端点

要在Spring Boot Actuator中实现自定义端点,可以按照以下步骤进行操作: 1.创建一个自定义端点类 该类需要使用Endpoint注解进行标记,并使用Component注解将其作为Spring Bean进行管理。 package com.example.highactuator.point;import lo…...

实时音视频方案汇总

若有好的方案欢迎留言讨论,非常感谢,汇总了一些,从市面上了解的一些低时延的端到端的方案,仅供参照,若有问题,也欢迎留言更正! 方案 方案描述 时延 备注 1大华同轴高清电缆200米电缆&#xf…...

vue3.0中实现excel文件的预览

最近开发了一个需求,要求实现预览图片、pdf、excel、word、txt等格式的文件; 每种格式的文件想要实现预览的效果需要使用对应的插件,如果要实现excel格式文件的预览,要用到哪种插件呢? 答案:xlsx.full.min…...

信息学奥赛一本通 1435:【例题3】曲线 | 洛谷 洛谷 P1883 函数

【题目链接】 ybt 1435:【例题3】曲线 洛谷 P1883 函数 【题目考点】 1. 三分 【解题思路】 每个 S i ( x ) S_i(x) Si​(x)是一个二次函数, F ( x ) m a x ( S i ( x ) ) F(x) max(S_i(x)) F(x)max(Si​(x)),即为所有二次函数当自变量…...

OpenCV入门2——图像视频的加载与展示一些API

文章目录 题目OpenCV创建显示窗口OpenCV加载显示图片题目 OpenCV保存文件利用OpenCV从摄像头采集视频从多媒体文件中读取视频帧将视频数据录制成多媒体文件OpenCV控制鼠标关于[np.uint8](https://stackoverflow.com/questions/68387192/what-is-np-uint8) OpenCV中的TrackBar控…...

「校园 Pie」 系列活动正式启航,首站走进南方科技大学!

PieCloudDB 社区校园行系列活动「校园 Pie」已正式启动。「校园 Pie」旨在促进数据库领域的学术交流,提供一个平台让学生们了解最新的数据库发展趋势和相关技术应用。 在「校园 Pie」系列活动中,PieCloudDB 社区将携拓数派技术专家,社区大咖…...

【PyQt小知识 - 3】: QComboBox下拉框内容的设置和更新、默认值的设置、值和下标的获取

QComboBox 内容的设置和更新 from PyQt5.QtWidgets import * import sysapp QApplication(sys.argv)mainwindow QMainWindow() mainwindow.resize(200, 200) # 设置下拉框 comboBox QComboBox(mainwindow) comboBox.addItems([上, 中, 下])button QPushButton(更新, main…...

Oracle OCM考试(史上最详细的介绍,需要19c OCP的证书)

Oracle 19c OCM考试和之前版本的OCM考试差不多,对于考生来说最大的难点是题量大,每场3小时,一共4场,敲键盘敲得手抽筋。姚远老师(v:dataace)的很多Oracle OCP学员都对19c OCM考试很有兴趣,这里给…...

广州华锐互动VRAR:VR教学楼地震模拟体验增强学生防震减灾意识

在当今社会,地震作为一种自然灾害,给人们的生活带来了巨大的威胁。特别是在学校这样的集体场所,一旦发生地震,后果将不堪设想。因此,加强校园安全教育,提高师生的防震减灾意识和能力,已经成为了…...

?. 语法报错

报错 Syntax Error: SyntaxError: E:xxx\src\views\xxx.vue: Support for the experimental syntax ‘optionalChaining’ isn’t currently enabled (173:27): 171 | label: node.label, 172 | style: { 173 | fill: colorSet?.mainFill || ‘#DEE9FF’, | ^ 174 | stroke: …...

FPGA——IP核 基础操作

FPGA——IP核 基础操作 IP核例化模块时钟IP核RAM IP核 IP核例化模块 找到模版 加入代码中 时钟IP核 配置模式功能 配置输入时钟 输出配置 RAM IP核...

unity unityWebRequest 通过http下载服务器资源

直接下载不显示进度 private void OnDownloadAssets()//下载资源{StartCoroutine(DownloadFormServer_IE(url, savePath));}//其他方法private IEnumerator DownloadFormServer_IE(string url, string path)//从服务器下载资源{Debug.Log("正在下载" url);UnityWebR…...

13-1-SRGAN-图像超分-残差模块-亚像素卷积

文章目录 1 定义生成器Generator残差模块生成器亚像素卷积2 定义判别器Discriminator3 训练1 判别器训练2 生成器训练3 程序细节使用use.py参考: 论文: https://arxiv.org/abs/1609.04802 论文翻译: https://blog.csdn.net/MR_kdcon/article/details/123525914 代码: SRG…...

Maya v2024(3D动画制作软件)

Maya 2024是一款三维计算机图形动画制作软件。它被广泛应用于电影、电视、游戏、动画等领域中,用于创建各种三维模型、场景、特效和动画。 以下是Maya的主要特点: 强大的建模工具:Maya提供了各种建模工具,如多边形建模、NURBS建模…...

深度学习之基于YoloV5苹果新鲜程度检测识别系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 深度学习之基于 YOLOv5 苹果新鲜程度检测识别系统介绍YOLOv5 简介苹果新鲜程度检测系统系统架构应用场景 二、功能三、系统四. 总结 一项目简介 深度学习之…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

6.9本日总结

一、英语 复习默写list11list18,订正07年第3篇阅读 二、数学 学习线代第一讲,写15讲课后题 三、408 学习计组第二章,写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语:复习l默写sit12list17&#…...

Docker环境下安装 Elasticsearch + IK 分词器 + Pinyin插件 + Kibana(适配7.10.1)

做RAG自己打算使用esmilvus自己开发一个,安装时好像网上没有比较新的安装方法,然后找了个旧的方法对应试试: 🚀 本文将手把手教你在 Docker 环境中部署 Elasticsearch 7.10.1 IK分词器 拼音插件 Kibana,适配中文搜索…...