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

【前端每日基础】day35——HTML5离线存储

news 2026/4/1 7:18:25

HTML5引入了一些新的特性和API来增强Web应用的功能，其中之一就是离线存储。离线存储允许Web应用在没有网络连接的情况下仍能正常运行。以下是HTML5离线存储的主要技术和详细介绍：

Web Storage (LocalStorage 和 SessionStorage)
LocalStorage
概述：LocalStorage用于持久化存储数据，数据不会随页面会话结束而消失，除非明确删除。
存储容量：通常为5MB左右，不同浏览器可能略有不同。
生命周期：数据持久保存，除非通过代码或用户手动清除。
示例代码
设置数据

localStorage.setItem('key', 'value');

获取数据

const value = localStorage.getItem('key');

删除数据

localStorage.removeItem('key');

清空所有数据

localStorage.clear();
SessionStorage

概述：SessionStorage用于临时存储数据，数据仅在当前会话存在，关闭页面或浏览器后数据消失。
存储容量：通常为5MB左右。
生命周期：数据在页面会话期间存在。
示例代码
设置数据

sessionStorage.setItem('key', 'value');

获取数据

const value = sessionStorage.getItem('key');

删除数据

sessionStorage.removeItem('key');

清空所有数据

sessionStorage.clear();

IndexedDB
概述
IndexedDB是一个底层的API，用于在用户的浏览器中存储大量结构化数据。它允许创建、读取、修改和删除事务性的数据库操作，适用于需要存储大量数据的应用程序，如离线Web应用、游戏等。

特点
结构化存储：可以存储对象和键值对。
事务性：所有操作都在事务中执行，确保数据一致性。
异步操作：所有操作都是异步的，不会阻塞用户界面。
示例代码
打开数据库

const request = indexedDB.open('myDatabase', 1);request.onupgradeneeded = function(event) {const db = event.target.result;db.createObjectStore('myObjectStore', { keyPath: 'id' });
};request.onsuccess = function(event) {const db = event.target.result;// 执行数据库操作
};

添加数据

const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const request = objectStore.add({ id: 1, name: 'John Doe' });request.onsuccess = function(event) {console.log('数据添加成功');
};request.onerror = function(event) {console.log('数据添加失败');
};

读取数据

const transaction = db.transaction(['myObjectStore']);
const objectStore = transaction.objectStore('myObjectStore');
const request = objectStore.get(1);request.onsuccess = function(event) {console.log('数据读取成功', request.result);
};request.onerror = function(event) {console.log('数据读取失败');
};

Web SQL
概述
Web SQL是一种基于SQL的数据库API，最初由WebKit项目提出，但目前已被废弃，不推荐在新项目中使用。建议使用IndexedDB代替。
Application Cache（已废弃）
概述
Application Cache允许Web应用指定哪些资源应该被缓存，以便在离线状态下仍能访问。但该API在HTML5规范中已被废弃，建议使用Service Workers替代。

示例代码
创建缓存清单

CACHE MANIFEST
# 2023-05-01 v1.0
/index.html
/styles.css
/script.js

在HTML中引用缓存清单

<!DOCTYPE html>
<html manifest="cache.appcache">
<head><meta charset="UTF-8"><title>离线应用示例</title>
</head>
<body><h1>这个页面可以离线访问</h1>
</body>
</html>

Service Workers
概述
Service Workers是一种能在后台运行的脚本，它们为创建离线应用提供了更强大和灵活的方式。通过拦截网络请求、缓存资源、处理消息推送等，Service Workers极大地增强了Web应用的功能和性能。

特点
拦截和处理网络请求：可以缓存资源，提供离线功能。
后台同步：可以在网络连接恢复时同步数据。
推送通知：可以接收和显示推送通知。
示例代码
注册Service Worker

if ('serviceWorker' in navigator) {window.addEventListener('load', function() {navigator.serviceWorker.register('/service-worker.js').then(function(registration) {console.log('Service Worker 注册成功:', registration);}, function(error) {console.log('Service Worker 注册失败:', error);});});
}

Service Worker 文件（service-worker.js）

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = ['/','/styles.css','/script.js'
];self.addEventListener('install', function(event) {event.waitUntil(caches.open(CACHE_NAME).then(function(cache) {console.log('打开缓存');return cache.addAll(urlsToCache);}));
});self.addEventListener('fetch', function(event) {event.respondWith(caches.match(event.request).then(function(response) {if (response) {return response;}return fetch(event.request);}));
});

总结
HTML5提供了多种离线存储技术，使Web应用能够在无网络连接时正常运行。LocalStorage和SessionStorage适用于简单的键值对存储，IndexedDB适用于复杂的数据存储和查询，Service Workers则提供了强大的缓存和后台处理能力。合理使用这些技术，可以显著提升Web应用的用户体验和性能。

【前端每日基础】day35——HTML5离线存储

HTML5引入了一些新的特性和API来增强Web应用的功能，其中之一就是离线存储。离线存储允许Web应用在没有网络连接的情况下仍能正常运行。以下是HTML5离线存储的主要技术和详细介绍： Web Storage (LocalStorage 和 SessionStorage) LocalStorage 概述&…...

编程日记 2024/6/2 22:51:33

动态规划算法：背包问题

背包问题概述背包问题 (Knapsack problem) 是⼀种组合优化的 NP完全问题。问题可以描述为：给定⼀组物品，每种物品都有⾃⼰的重量和价格，在限定的总重量内，我们如何选择，才能使得物品的总价格最⾼。根据物品的个…...

编程日记 2024/6/2 22:50:31

新版idea配置git步骤及项目导入

目录 git安装下载打开git Bash 配置全局用户名及邮箱查看已经配置的用户名和邮箱在IDEA中设置Git 问题解决项目导入前言-与正文无关生活远不止眼前的苦劳与奔波，它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&#xff0…...

编程日记 2024/6/2 22:49:30

赶紧收藏！2024 年最常见 20道 Kafka面试题（一）

一、Kafka都有哪些特点？ Kafka是一个分布式流处理平台，它被设计用于高吞吐量的数据管道和流处理。以下是Kafka的一些主要特点： 高吞吐量、低延迟：Kafka每秒可以处理数十万条消息，延迟可以低至几毫秒。这是通过优化数据…...

编程日记 2024/6/2 22:47:28

unsigned char和const char的一些问题

1.可以返回字符串常量，但是不能返回char buf[BUF_SIZE] char* get_str(){char* str "hello world";return str; }char* get_str(){char str[32] {0};strcpy(str, "hello world");return str; }//err 2.联合体不能用指针，也…...

编程日记 2024/6/2 22:46:27

前端知识1-4：性能优化进阶

性能优化进阶 Navigation Timing API navigationStart / end 表示从上一个文档卸载结束时 > 如果没有上一个文档，这个值和fetchStart相等 unloadEventStart / end 标识前一个网页unload的时间点 redirectStart / end 第一个http重定向发生和结束的时间 fetch…...

编程日记 2024/6/2 22:45:26

ios 新安装app收不到fcm推送

🏆本文收录于「Bug调优」专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&…...

编程日记 2024/6/2 22:44:24

汽美汽修店管理系统会员小程序的作用是什么

汽车后市场汽美汽修赛道同样存在着大量商家，连锁品牌店或个人小店等，门店扎堆且区域覆盖面积广，当然每天车来车往也有不少生意。随着线上化程度加深和商家不断拓展市场的需要，传统运营模式可能难以满足现状，尤其是年…...

编程日记 2024/6/2 22:43:23

远程自动锁定平面

目录 Ubuntu 系统上方法一：使用 SSH 重新连接方法二：解锁当前会话方法三：通过 SSH 解锁会话方法四：禁用自动锁屏（如果合适） windows系统方法三：修改组策略设置 Ubuntu 系统上远程…...

编程日记 2024/6/2 22:42:23

鸿蒙Ability Kit（程序框架服务）【UIAbility组件与UI的数据同步】

UIAbility组件与UI的数据同步基于当前的应用模型，可以通过以下几种方式来实现UIAbility组件与UI之间的数据同步。 [使用EventHub进行数据通信]：在基类Context中提供了EventHub对象，可以通过发布订阅方式来实现事件的传递。在事件传递前&am…...

编程日记 2024/6/2 22:41:21

一个完整的springboot项目，我们还需要做什么

文章目录一从0创建Srpingboot项目1.1 启动springboot项目1.2 导入必要的依赖二、还缺什么2.1 统一异常捕获2.2 统一MVC返回2.3 数据分层2.4 连接数据库模块2.5 放置常量和工具类2.6 基础controller、基础entity、query查询类2.7 为了方便处理异常，一般还可以入参…...

编程日记 2024/6/2 22:39:19

QT-界面居中管理

问题：为什么不能对checkbox直接居中，LineEdit可以复选框是一个固定大小的控件，不适合填满整个单元格，而相比之下QLineEdit是一个可变大小的控件关于居中： lineEdit：lineEdit -> setAlignment(QT::Al…...

编程日记 2024/6/2 22:37:17

Python | MATLAB | R 心理认知数学图形模型推断

🎯要点 🎯图形模型推断二元过程概率：🖊模型1：确定成功率 θ 的后验分布 | 🖊模型2：确定两个概率差 δ \delta δ 的后验分布 | 🖊模型3：确定底层概率，后验预…...

编程日记 2024/6/2 22:36:15

Linux系统tab键无法补齐命令-已解决

在CentOS中，按下tab键就可以自动补全，但是在最小化安装时，没有安装自动补全的包，需要安装一个包才能解决 bash-completion 1.检查是否安装tab补齐软件包（如果是最小化安装，默认没有） rpm -q ba…...

编程日记 2024/6/2 22:33:12

数据库之函数、存储过程

函数、存储过程 1.函数函数，常用于对一个或多个输入参数进行操作，主要目的是返回一个结果值，就是一种方法，在postgre里存放的位置叫function，比如创建一个计算长方面积的函数。举例：建立一个计算长方形…...

编程日记 2024/6/2 22:31:10

安卓启动性能提升 20-30% ，基准配置入门教程

1.先从官方下载demohttps://github.com/android/codelab-android-performance/archive/refs/heads/main.zip 2.先用Android studio打开里面的baseline-profiles项目 3.运行一遍app，这里建议用模拟器，（Pixel 6 API 34）设备运行&a…...

编程日记 2024/6/2 22:30:09

Linux C/C++目录和文件的更多操作

1.access()库函数用于判断当前用户对目录或文件的存取权限 #include<unistd.h>int accsee(const char *pathname,int mode);参数说明： pathname //目录或文件名 mode //需要判断的存取权限，在<unistd.h>预定义如下#define R_OK 4 //读权…...

编程日记 2024/6/2 22:29:08

如何高效地向Redis 6插入亿级别的数据

如何高效地向Redis插入亿级别的数据背景不可用的方案可用方案:利用管道插入其他命令：参考： 背景上一条记录；80G的存储；10几个文件，如何快速导入是一个大问题，也是一个很棘手的问题；如下将给出…...

编程日记 2024/6/2 22:27:05

中国历年肥料进口数量统计报告

数据来源于国家统计局，为1991年到2021年我国每年肥料进口数量统计。 2021年，我国进口肥料909万吨，比上年减少151万吨。数据统计单位为：万吨数据说明： 数据来源于国家统计局，为海关进出口统计数我国肥料…...

编程日记 2024/6/2 22:26:04

即时通讯视频会议平台，WorkPlus本地化部署解决方案

随着现代科技的快速发展，传统的会议方式已经不再满足企业和组织的需求。即时通讯视频会议以其便利性和高效性，成为了现代企业沟通和协作的重要工具。通过即时通讯视频会议，企业可以实现无时差的交流和远程协作，增强团队合作和提高…...

编程日记 2024/6/2 22:25:03

别再只用官方节点了！手把手教你安装n8n社区节点，解锁隐藏工作流能力

解锁n8n隐藏潜能：社区节点深度应用指南你是否曾在n8n中构建工作流时，发现官方节点无法满足某些特定需求？比如需要更复杂的文本处理、社交媒体深度集成，或是与某些小众API对接？这正是社区节点大显身手的时刻。作为n8n生…...

编程新知 2026/4/1 7:14:51

P1095 守望者的逃离【洛谷算法习题】

P1095 守望者的逃离网页链接 P1095 守望者的逃离题目背景 NOIP2007 普及组 T3 题目描述恶魔猎手尤迪安野心勃勃，他背叛了暗夜精灵，率领深藏在海底的娜迦族企图叛变。守望者在与尤迪安的交锋中遭遇了围杀，被困在一个荒芜的大岛上。…...

编程新知 2026/4/1 6:11:23

千问3.5-2B在办公提效场景：会议白板照片文字提取+要点总结实战

千问3.5-2B在办公提效场景：会议白板照片文字提取要点总结实战 1. 办公场景的痛点与解决方案 1.1 会议记录的传统困境每次开完会，最让人头疼的就是整理会议记录了。特别是那些在白板上写满讨论要点的会议，你需要： 对着白板照片…...

编程新知 2026/4/1 5:49:08

STM32CubeIDE工程复制粘贴保姆级教程：告别重复配置，5分钟搞定新项目

STM32CubeIDE工程复制粘贴保姆级教程：告别重复配置，5分钟搞定新项目每次启动新项目时，你是否还在重复那些繁琐的初始化步骤？从零开始配置时钟树、外设参数、中断优先级，不仅耗时费力，还容易出错。对于经验…...

编程新知 2026/4/1 5:39:02

嵌入式C语言状态机编程实践与优化

1. 状态机编程基础概念在嵌入式系统开发中，状态机(State Machine)是一种极其重要的编程范式。它通过定义系统可能处于的状态集合、状态之间的转换条件以及状态转换时执行的动作，来清晰地描述系统的行为逻辑。状态机之所以在嵌入式领域广泛应用&#xff0…...

编程新知 2026/4/1 4:30:07

MongoDB：如何构建“数据回收站“，防止人为误删数据（延迟节点）

更多内容请见：《深入掌握MongoDB数据库》 - 专栏介绍和目录一、引言：数据误删的现实挑战在企业级数据库系统中，人为误删数据是导致业务中断的常见原因。根据2023年数据库安全报告，37%的数据丢失事件是由人为错误引起的，其中误删除操作占主要部分。MongoDB作为企业级No…...

编程新知 2026/4/1 4:09:45

你在关系里是不是“管太多“？免费控制欲测试，评估你的占有程度

你在关系里是不是"管太多"？免费控制欲测试，评估你的占有程度引言你是否总是想知道伴侣在哪里、和谁在一起？是否经常查看对方的手机或社交账号？是否对伴侣和异性接触特别敏感？ 还是你常常因为对方的某些…...

编程新知 2026/4/1 1:25:16

Libre Barcode：终极免费条码字体解决方案，让条码生成变得简单高效

Libre Barcode：终极免费条码字体解决方案，让条码生成变得简单高效【免费下载链接】librebarcode Libre Barcode: barcode fonts for various barcode standards. 项目地址: https://gitcode.com/gh_mirrors/li/librebarcode Libre Barcode 是一个…...

编程新知 2026/4/1 0:19:54

Linux 内核中的信号处理：从发送到捕获

Linux 内核中的信号处理：从发送到捕获引言作为一名深耕操作系统和嵌入式开发的工程师，我深知通知机制的重要性。在系统开发中，及时的通知可以帮助系统快速响应事件。在 Linux 内核中，信号是一种重要的进程间通信机制&#xff0c…...

编程新知 2026/3/31 23:37:05

基于STM32单片机扫地机器人仿真系统设计 1、使用 STM32 单片机作为核心控制器

基于STM32单片机扫地机器人仿真系统设计 1、使用 STM32 单片机作为核心控制器; 2、选择超声波(1个)、红外线(两个，放在左右)两种传感器进行有效地避障; 3、使用角度传感器 MPU6050 测量角度,检测扫地机器人的运动状态，是否有倾倒; 4、OLED 屏显示超声波距…...

编程新知 2026/3/31 21:18:57

相关文章：