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

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

news 2025/7/10 8:03:58

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

  1. 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();
  1. 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('数据读取失败');
};

  1. Web SQL
    概述
    Web SQL是一种基于SQL的数据库API，最初由WebKit项目提出，但目前已被废弃，不推荐在新项目中使用。建议使用IndexedDB代替。

  2. 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>
  1. 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应用的功能&#xff0c;其中之一就是离线存储。离线存储允许Web应用在没有网络连接的情况下仍能正常运行。以下是HTML5离线存储的主要技术和详细介绍&#xff1a; Web Storage (LocalStorage 和 SessionStorage) LocalStorage 概述&…...

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

动态规划算法：背包问题

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

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

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

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

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

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

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

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

unsigned char*和const char*的一些问题

1.可以返回字符串常量&#xff0c;但是不能返回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.联合体不能用指针&#xff0c;也…...

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

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

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

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

ios 新安装app收不到fcm推送

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

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

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

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

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

远程自动锁定平面

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

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

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

UIAbility组件与UI的数据同步 基于当前的应用模型&#xff0c;可以通过以下几种方式来实现UIAbility组件与UI之间的数据同步。 [使用EventHub进行数据通信]&#xff1a;在基类Context中提供了EventHub对象&#xff0c;可以通过发布订阅方式来实现事件的传递。在事件传递前&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 为了方便处理异常&#xff0c;一般还可以入参…...

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

QT-界面居中管理

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

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

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

&#x1f3af;要点 &#x1f3af;图形模型推断二元过程概率&#xff1a;&#x1f58a;模型1&#xff1a;确定成功率 θ 的后验分布 | &#x1f58a;模型2&#xff1a;确定两个概率差 δ \delta δ 的后验分布 | &#x1f58a;模型3&#xff1a;确定底层概率&#xff0c;后验预…...

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

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

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

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

数据库之函数、存储过程

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

编程日记 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&#xff0c;这里建议用模拟器&#xff0c;&#xff08;Pixel 6 API 34&#xff09;设备运行&a…...

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

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

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

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

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

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

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

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

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

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

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

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

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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/6/21 11:59:52

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/9 4:24:11

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/7/10 5:58:17

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/7/10 5:41:13

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/7/8 16:00:54

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/7/6 12:46:50

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/7/6 20:49:39

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/7/10 0:13:46

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/7/6 12:33:45

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

编程新知 2025/7/9 13:39:46