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

HTML5系列（7）-- Web Storage 实战指南

news 来源：原创 2025/5/7 8:37:12

前端技术探索系列：HTML5 Web Storage 实战指南 🗄️

致读者：本地存储的新纪元 👋

前端开发者们，

今天我们将深入探讨 HTML5 中的 Web Storage 技术，这是一个强大的本地存储解决方案，让我们能够更高效地管理网页数据。

localStorage 详解 🚀

基础操作

// 存储数据
localStorage.setItem('username', 'Alice');
localStorage.setItem('preferences', JSON.stringify({theme: 'dark',fontSize: '16px'
}));// 读取数据
const username = localStorage.getItem('username');
const preferences = JSON.parse(localStorage.getItem('preferences'));// 删除数据
localStorage.removeItem('username');// 清空所有数据
localStorage.clear();

生命周期与限制 ⏳

永久存储，除非手动清除
存储限制通常为 5-10 MB
同源策略限制

sessionStorage 应用 🔄

会话级存储

// 存储临时会话数据
sessionStorage.setItem('currentPage', '1');
sessionStorage.setItem('searchHistory', JSON.stringify(['前端开发','HTML5','Web Storage'
]));// 页面刷新后数据仍然存在
const currentPage = sessionStorage.getItem('currentPage');
const searchHistory = JSON.parse(sessionStorage.getItem('searchHistory'));

与 localStorage 的关键区别

// localStorage 示例 - 跨标签页可访问
localStorage.setItem('globalCount', '1');// sessionStorage 示例 - 仅在当前标签页可用
sessionStorage.setItem('tabCount', '1');// 数据持久性测试
function testStoragePersistence() {console.log('localStorage:', localStorage.getItem('globalCount')); // 关闭浏览器后仍存在console.log('sessionStorage:', sessionStorage.getItem('tabCount')); // 关闭标签页后消失
}

数据管理最佳实践 💡

数据序列化

// 存储复杂数据结构
const userSettings = {theme: 'dark',notifications: {email: true,push: false},lastLogin: new Date()
};// 序列化存储
function saveSettings(settings) {try {localStorage.setItem('userSettings', JSON.stringify(settings));return true;} catch (e) {console.error('Storage failed:', e);return false;}
}// 反序列化读取
function loadSettings() {try {const settings = JSON.parse(localStorage.getItem('userSettings'));settings.lastLogin = new Date(settings.lastLogin); // 恢复日期对象return settings;} catch (e) {console.error('Loading failed:', e);return null;}
}

安全性考虑

// 敏感数据加密存储
class SecureStorage {static encrypt(data) {// 实际项目中应使用专业的加密库return btoa(JSON.stringify(data));}static decrypt(data) {try {return JSON.parse(atob(data));} catch (e) {console.error('Decryption failed');return null;}}static save(key, data) {localStorage.setItem(key, this.encrypt(data));}static load(key) {const data = localStorage.getItem(key);return data ? this.decrypt(data) : null;}
}

浏览器兼容性 🌐

特性	Chrome	Firefox	Safari	Edge
localStorage	✅	✅	✅	✅
sessionStorage	✅	✅	✅	✅
存储限制	10MB	10MB	5MB	10MB

实战项目：本地数据缓存系统 📦

class CacheManager {constructor(prefix = 'app_cache_') {this.prefix = prefix;this.defaultExpiry = 24 * 60 * 60 * 1000; // 24小时}// 存储带过期时间的数据setItem(key, value, expiryMs = this.defaultExpiry) {const item = {value: value,expiry: Date.now() + expiryMs,created: Date.now()};localStorage.setItem(this.prefix + key, JSON.stringify(item));}// 获取数据，自动处理过期逻辑getItem(key) {const item = localStorage.getItem(this.prefix + key);if (!item) return null;const data = JSON.parse(item);if (Date.now() > data.expiry) {this.removeItem(key);return null;}return data.value;}// 删除数据removeItem(key) {localStorage.removeItem(this.prefix + key);}// 获取所有缓存键getAllKeys() {return Object.keys(localStorage).filter(key => key.startsWith(this.prefix)).map(key => key.slice(this.prefix.length));}// 清理过期数据cleanup() {this.getAllKeys().forEach(key => {this.getItem(key); // 会自动检查和清理过期项});}
}// 使用示例
const cache = new CacheManager();// 存储数据
cache.setItem('user', { id: 1, name: 'Alice' });
cache.setItem('temp', { data: 'temporary' }, 5000); // 5秒后过期// 读取数据
const user = cache.getItem('user');
console.log(user); // { id: 1, name: 'Alice' }// 5秒后
setTimeout(() => {const temp = cache.getItem('temp');console.log(temp); // null（已过期）
}, 6000);

性能优化建议 ⚡

存储策略
- 避免存储过大数据
- 定期清理过期数据
- 使用前缀避免命名冲突
序列化优化
- 压缩大型数据
- 避免频繁序列化操作
- 考虑使用专门的序列化库
错误处理
- 捕获配额超限异常
- 实现降级存储方案
- 监控存储使用情况

调试工具推荐 🛠️

Chrome DevTools Application 面板
Firefox Storage Inspector
Storage Manager API
Web Storage Explorer 插件

写在最后 🌟

Web Storage 为现代 Web 应用提供了强大的本地存储能力。合理使用这些特性，可以显著提升应用性能和用户体验！

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

HTML5系列（7）-- Web Storage 实战指南

前端技术探索系列：HTML5 Web Storage 实战指南 🗄️ 致读者：本地存储的新纪元 👋 前端开发者们， 今天我们将深入探讨 HTML5 中的 Web Storage 技术，这是一个强大的本地存储解决方案，让我们能…...

编程日记 2025/5/7 8:37:12

RocketMQ: 保证消息的可靠性投递

概述在分布式系统中，消息队列作为异步通信的重要组件，其可靠性和稳定性至关重要RocketMQ 是阿里巴巴开源的一款高性能、高可靠性的分布式消息中间件，广泛应用于各种场景，如交易订单处理、日志收集、流计算等 RocketMQ 的可靠性…...

编程日记 2025/5/6 7:23:01

消息传递神经网络（Message Passing Neural Networks, MPNN）

消息传递神经网络（Message Passing Neural Networks, MPNN） 一、引言二、消息传递框架概述1.消息传递阶段（1）消息生成与传播-message（2）消息聚合-aggregate（3）消息更新-update&#…...

编程日记 2025/5/7 7:00:28

Python干货总结篇：列表、字典、集合、元组的区别与用途

前言： 更详细知识点，搞懂列表、字典、集合、元组到底是什么，可关注主页文章：Python知识点精汇！ 目录一、特点与用途 1.列表：a[ ] 2.集合：a{ } 3.字典：a{key:value} 4.元组&am…...

编程日记 2025/5/7 8:02:10

1、安装minio 下载适合自己系统版本的安装文件https://dl.min.io/server/minio/release/windows-amd64/ yum install xxx.rpm 2、配置/etc/profile export MINIO_ACCESS_KEYroot [ui登录账号] export MINIO_SECRET_KEYminioDev001 [ui登录密码] export MINIO_OPTS"…...

编程日记 2025/5/7 7:12:53

医院管理系统

私信我获取源码和万字论文，制作不易，感谢点赞支持。医院管理系统摘要随着信息互联网信息的飞速发展，医院也在创建着属于自己的管理系统。本文介绍了医院管理系统的开发全过程。通过分析企业对于医院管理系统的需求，创建了一个计…...

编程日记 2025/5/7 8:00:59

编译器优化技术

方法内联逃逸分析公共子表达式消除数据边界检查消除...

编程日记 2025/4/9 4:29:22

高斯消元——acwing

题目一：高斯消元解线性方程组 883. 高斯消元解线性方程组 - AcWing题库分析代码 #include<bits/stdc.h> using namespace std;const int N 110; const double eps 1e-6; // 注意了double, 和1e-6 ,,这样才是double的0 int n;double a[N][N];int guass…...

编程日记 2025/5/6 15:01:28

华为关键词覆盖应用市场ASO优化覆盖技巧

在我国的消费者群体当中，华为的品牌形象较高，且产品质量过硬，因此用户基数也大。与此同时，随着影响力的增大，华为不断向外扩张，也逐渐成为了海外市场的香饽饽。作为开发者和运营者，我们要认识到…...

编程日记 2025/5/7 7:26:13

[代码随想录06]哈希表的使用，有效字母异位词，两数组交集，快乐数，两数之和

前言哈希表是什么？一句话带你理解，简单来说我们对于杂乱的数据，怎么快速找到数据，如何做呢？一般的做法就是遍历复杂度为o(N)去找寻一个数据，但是吧，我们这样思考的话，还是花了大量时…...

编程日记 2025/5/6 17:41:54

linux网络抓包工具

linux网络抓包工具一、tcpdump1.1 基本用法1.2 龙芯平台实例操作二、wireshark2.1 主要功能2.2 龙芯平台实例操作一、tcpdump tcpdump 指令可列出经过指定网络界面的数据包文件头，可以将网络中传送的数据包的 “头” 完全截获下来提供分析。它支持针对网络层、协…...

编程日记 2025/5/7 7:15:33

运维工程师.云计算工程师面试题.考试题

《（全国）运维自动化阶段第1套卷》卷面总分题号单选题 90 题分得分一、单选题（每题2分，共计70分；得分____） 1．下面哪个选项可以做变量名称？（） A、if B、123abc C、for D、User_Name 2．哪种数据类型可以做增,删,改相关操作？（） A、字符串 B、列表 C、元…...

编程日记 2025/5/6 17:09:11

递归1——递归入门

目录 1.递归 2.递归的基本题目 2.1.题目一——P5739 【深基7.例7】计算阶乘 - 洛谷 | 计算机科学教育新生态 2.2.题目二——B2064 斐波那契数列 - 洛谷 | 计算机科学教育新生态 2.3.题目三——B2142 求 123...N 的值 - 洛谷 | 计算机科学教育新生态 2.4.题目四——B2144…...

编程日记 2025/5/7 7:06:05

XuperChain核心流程

04-XuperChain核心流程 0 XuperChain架构图核心框架 Xuper Chain主要由 Xuper Core 这个核心引擎来构建。Xuper Core 分为三个部分： 基础组件：日志、存储、监控等关键组件，以及密码学库等基本组件。核心组件：包括共识、合约、账…...

编程日记 2025/5/7 7:08:49

2024.12.2工作复盘

1.今天学了什么？ 简单的写了一篇博客，是关于参数校验的问题，参数校验，一个是前后端校验到底一不一致，一个是绕过前端校验，看后台的逻辑到底能不能校验住。 2.今天解决了什么问题？ 3.今天完成…...

编程日记 2025/5/7 8:18:39

关于Vscode配置Unity环境时的一些报错问题（持续更新）

第一种报错： 下载net请求超时（一般都会超时很正常的） 实际时并不需要解决，它对你的项目毫无影响第二种报错： .net版本不匹配解决：（由于造成问题不一样，所以建议都尝试一次&…...

编程日记 2025/5/7 8:25:15

微信小程序——文档下载功能分享（含代码）

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...

编程日记 2025/5/6 2:05:45

长短期记忆网络（LSTM）简介

文章目录一、说明二、传统 RNN 的问题三、为什么梯度消失？四、长短期记忆网络简介五、忘记门六、Update Gate (Input Gate)七、Output Gate八、数学上的内存九、从 LSTM 到 Transformer十、总结一、说明机器学习取得进步的领域之一是自然语言处理。对于用于机器…...

编程日记 2025/5/4 10:42:00

【电子通识】USB Type-C线缆为什么有的用到E-Marker芯片

USB Type-C接口具备数据传输、充电（基于USB PD协议）和音频视频传输能力。但是，上述功能都有强弱之别，并因此衍生出了无数种规格的USB Type-C线缆。如下所示直接搜索就可以看到，虽然都是Type-C接口，但存在很多不同种类的线缆规格。以数据传输为例，USB Type-C可选USB2.0…...

编程日记 2025/5/1 3:07:02

【故障处理系列--移动云云盘根目录在线扩容】

移动云云盘根目录扩容 **目的：**测试harbor仓库服务器的根目录能否在线扩容 1、移动云控制台系统盘扩容这里以我自己的虚拟机演示 2、查看分区的文件类型 3、安装growpart工具 rootgitlab-cli:~# apt install cloud-guest-utils -y rootgitlab-cli:~# apt ins…...

编程日记 2025/5/3 4:16:22

混沌工程/混沌测试/云原生测试/云平台测试

背景私有云/公有云/混合云等具有复杂，分布式，环境多样性等特点，许多特殊场景引发的线上问题很难被有效发现。所以需要引入混沌工程，建立对系统抵御生产环境中失控条件的能力以及信心，提高系统面对未知风险得能力。 …...

编程日记 2025/5/6 9:55:51

CQ 社区版 2024.11 | 新增“审批人组”概念、可通过SQL模式自定义审计图表……

CloudQuery 社区 11 月新版本来啦！本月版本依旧是 CUG（CloudQuery 用户组）尝鲜版的更新。针对审计模块增加了 SQL 模式自定义审计图表；在流程模块引入了“审批人组”概念。此外，在 SQL 编辑器、连接管理等模块都涉及…...

编程日记 2025/5/3 12:43:07

【maven-4】IDEA 配置本地 Maven 及如何使用 Maven 创建 Java 工程

IntelliJ IDEA（以下简称 IDEA）是一款功能强大的集成开发环境，广泛应用于 Java 开发。下面将详细介绍如何在 IDEA 中配置本地 Maven，并创建一个 Maven Java 工程，快速上手并高效使用 Maven 进行 Java 开发。 1. Maven …...

编程日记 2025/5/4 9:57:30

c语言结构体

c语言结构体 1. 结构体的定义在C语言中，结构体是一种用户自定义的数据类型，它允许你将不同类型的数据组合成一个单一的实体。结构体的定义以struct关键字开头，后面跟着结构体标签（可以省略，但为了方便后续引用&#…...

编程日记 2025/4/29 12:51:54

洛谷二分题

P1024 [NOIP2001 提高组] 一元三次方程求解题目描述有形如：𝑎𝑥3𝑏𝑥2𝑐𝑥𝑑0ax3bx2cxd0 这样的一个一元三次方程。给出该方程中各项的系数（𝑎,&#x1d44…...

编程日记 2025/5/2 9:54:48

vue3的项目目录和关键文件

注意换插件 vue2的是 Vetur ；vue3的是volar 这里注意volar插件已更名为Vue - Official vite.config.js 放跟vite配置相关的内容区别于vue2；vue2是vue.config.js；vue2是基于webpack的，vue3是基于vite的 main.js import { creat…...

编程日记 2025/4/20 9:28:46

rabbitmq原理及命令

目录一、RabbitMQ原理1、交换机（Exchange）fanoutdirecttopicheaders（很少用到） 2、队列Queue3、Virtual Hosts4、基础对象二、RabbitMQ的一些基本操作:1、用户管理2、用户角色3、vhost4、开启web管理接口5、批量删除队列一、Ra…...

编程日记 2025/4/29 7:42:54

洛谷 P1308 [NOIP2011 普及组] 统计单词数 C语言

题目： https://www.luogu.com.cn/problem/P1308 复制Markdown 展开题目描述一般的文本编辑器都有查找单词的功能，该功能可以快速定位特定单词在文章中的位置，有的还能统计出特定单词在文章中出现的次数。现在，请你编程实现…...

编程日记 2025/5/2 5:59:50

vue基础之5：vue数据代理、事件处理、事件修饰符、键盘事件

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…...

编程日记 2025/5/2 17:08:38

RK3568平台开发系列讲解（PWM篇）sysyfs 操作 pwm 原理讲解

🚀返回专栏总目录文章目录一、高精度定时器介绍沉淀、分享、成长，让自己和他人都能有所收获！😄 📢使用 sysfs 和内核 API 函数对硬件 PWM 进行控制，而当硬件 PWM 不够用的时候，可以使用 GPIO 来模拟实现 PWM，也可以称之为软件 PWM，软件 PWM 是通过软件编程实…...

编程日记 2025/5/6 19:14:45

python 练习题

目录 1，输入三个整数，按升序输出 2，输入年份及1-12月份，判断月份属于大月，小月，闰月，平月，并输出本月天数 3，输入一个整数，显示其所有是素数因子 4&#…...

编程日记 2025/5/6 5:30:24

SprinBoot整合KafKa的使用(详解)

前言 1. 高吞吐量（High Throughput） Kafka 设计的一个核心特性是高吞吐量。它能够每秒处理百万级别的消息，适合需要高频次、低延迟消息传递的场景。即使在大规模分布式环境下，它也能保持很高的吞吐量和性能，支持低延…...

编程日记 2025/5/7 7:47:22

CSS学习记录03

CSS背景 CSS 背景属性用于定义元素的背景效果。 CSS background-color background-color属性指定元素的背景色。页面的背景色设置如下： body {background-color: lightblue; } 通过CSS，颜色通常由以下方式指定： 有效的颜色名称-比如“…...

编程日记 2025/4/29 2:47:39

在Java中使用Apache POI导入导出Excel（二）

本文将继续介绍POI的使用，上接在Java中使用Apache POI导入导出Excel（一） 使用Apache POI组件操作Excel（二） 14、读取和重写工作簿 try (InputStream inp new FileInputStream("workbook.xls")) { //Inpu…...

编程日记 2025/5/4 12:57:56

Vue3学习宝典

1.ref函数调用的方式生成响应式数据，可以传复杂和简单数据类型 <script setup> // reactive接收一个对象类型的数据 import { reactive } from vue;// ref用函数调用的方式生成响应式数据，可以传复杂和简单数据类型 import { ref } from vue // 简…...

编程日记 2025/5/5 17:51:50

Unity开发FPS游戏之完结篇

这个系列的前几篇文章介绍了如何从头开始用Unity开发一个FPS游戏，感兴趣的朋友可以回顾一下。这个系列的文章如下： Unity开发一个FPS游戏_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个FPS游戏之二_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个F…...

编程日记 2025/4/29 12:50:48

基于BM1684的AI边缘服务器-模型转换，大模型一体机（二）

目标追踪注：所有模型转换都是在docker环境中的先进入docker 这里我们是要在docker环境里编译的，所以先进入docker :~/tpu-nntc# docker run -v $PWD/:/workspace -it sophgo/tpuc_dev:latest初始化环境 root2bb02a2e27d5:/workspace/tpu-nntc# s…...

编程日记 2025/5/1 12:51:12

IDEA连接Apifox客户端

IDEA连接Apifox客户端一、下载Apifox安装包二、IDEA配置三、配置Apifox和IDEA项目同步一、下载Apifox安装包 Apifox官网，根据自己的操作系统下载对应的Apifox安装包，我是windows系统所以下载的是windows版。下载默认仅为我安装，点击下一…...

编程日记 2025/5/2 17:12:13

vue中引用svg图标

要在 Vue 项目中引用 SVG 图标，有几种常见的方法。这里我将介绍两种方法：一种是直接在组件中内联 SVG 代码，另一种是将 SVG 作为单独的文件引用。方法一：内联 SVG 代码你可以直接在 Vue 组件的模板中嵌入 SVG 代码。这种方法适…...

编程日记 2025/5/4 6:49:07

【Laravel】模型封装属性基础

文章目录概要什么是封装模型属性？使用访问器和修改器封装属性访问器（Accessor）修改器（Mutator）测试业务实现运行结果小结概要随着项目规模的扩大，模型中的属性和方法可能会变得越来越复杂，这…...

编程日记 2025/4/30 12:02:28

【ROS编译未来时间戳报错修正】一种无需重零编译的文件时间戳更新方法分享

问题描述无论在ROS1还是ROS2使用catkin_make或者colcon build指令后，有时候会出现文件时间戳的问题，通常报错的内容大致如下文件的修改时间在未来XX秒后，警告：检测到时钟错误。您的构建版本可能是不完整的。解决方法不完美的…...

编程日记 2025/4/26 0:11:15

tauri使用github action打包编译多个平台arm架构和inter架构包踩坑记录

这些error的坑，肯定是很多人不想看到的，我的开源软件PakePlus是使用tauri开发的，PakePlus是一个界面化将任何网站打包为轻量级跨平台软件的程序，利用Tauri轻松构建轻量级多端桌面应用和多端手机应用，为了实现发布的时候…...

编程日记 2025/5/1 1:07:29

事务常见分类

目录 1.扁平事务 2.带有保存点的扁平事务 3.链事务 4.嵌套事务 5.分布式事务从事务理论的角度来看，可以把事务分为以下几种类型： 扁平事务（Flat Transactions） 带有保存点的扁平事务（Flat Transactions with Sa…...

编程日记 2025/5/4 4:41:48

深度学习案例：ResNet50模型+SE-Net

本文为为🔗365天深度学习训练营内部文章原作者：K同学啊一回顾ResNet模型 ResNet，即残差网络，是由微软研究院的Kaiming He及其合作者于2015年提出的一种深度卷积神经网络架构。该网络架构的核心创新在于引入了“残差连接”&…...

编程日记 2025/5/4 4:38:59

第三方Cookie的消亡与Google服务器端标记的崛起

随着互联网用户对隐私保护的关注日益增强，各大浏览器正在逐步淘汰第三方Cookie。这一变革深刻影响了广告商和数字营销人员的用户跟踪和数据分析方式。然而，Google推出的服务器端标记技术为这一挑战提供了新的解决方案。什么是第三方Cookie？ …...

编程日记 2025/5/4 21:02:12

arkTS：使用ArkUI实现用户信息的持久化管理与自动填充（PersistentStorage）

arkUI：使用ArkUI实现用户信息的持久化管理与自动填充（PersistentStorage） 1 主要内容说明2 例子2.1 登录页2.1.1登陆页的相关说明2.1.1.1 持久化存储的初始化2.1.1.2 输入框2.1.1.3 记住密码选项2.1.1.4 登录按钮的逻辑2.1.1.5 注册跳转 2.1.…...

编程日记 2025/5/4 22:02:11

01-Zabbix监控快速入门

01-Zabbix监控快速入门 1、监控知识基本概述1.1 什么是监控1.2 为何需要监控1.3 如何进行监控 2、单机时代如何监控2.1 监控CPU2.2 监控内存2.3 监控磁盘2.4 监控⽹络2.5 监控TCP2.6 监控脚本示例 3、常⻅的监控⽅案3.1 Cacti3.2 Nagios3.3 Zabbix3.4 Prometheus3.5 商业监控⽅…...

编程日记 2025/5/5 23:57:13

docker 怎么启动nginx

在Docker中启动Nginx容器是一个简单的过程。以下是启动Nginx容器的步骤： 拉取Nginx镜像： 首先，你需要从Docker Hub拉取Nginx的官方镜像。使用以下命令： docker pull nginx运行Nginx容器： 使用docker run命令来启动一个…...

编程日记 2025/5/1 23:34:54

1-1 Gerrit实用指南

注：学习gerrit需要拥有git相关知识，如果没有学习过git请先回顾git相关知识点黑马程序员git教程一小时学会git git参考博客 git 实操博客 1.0 定义 Gerrit 是一个基于 Web 的代码审查系统，它使用 Git 作为底层版本控制系统。Gerrit 的主要功…...

编程日记 2025/5/1 17:19:33