HTML5系列(7)-- Web Storage 实战指南
前端技术探索系列: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 技术,这是一个强大的本地存储解决方案,让我们能…...

【在Linux世界中追寻伟大的One Piece】读者写者问题与读写锁
目录 1 -> 读者写者问题 1.1 -> 什么是读者写者问题 1.2 -> 读者写者与生产消费者的区别 1.3 -> 如何理解读者写者问题 2 -> 读写锁 2.1 -> 读写锁接口 3 -> 读者优先(Reader-Preference) 4 -> 写者优先(Writer-Preference) 1 -> 读者写者…...

用到动态库的程序运行过程
当我们写好了一段代码然后编译运行后会生成可执行文件,该文件会存在磁盘的当前目录下,而当我们开始运行这段程序时,操作系统(加载器)需要将其从磁盘加载进内存然后执行相关操作,而对于用到动态库的程序&…...

类型转换与IO流:C++世界的变形与交互之道
文章目录 前言🎄一、类型转换🎈1.1 隐式类型转换🎈1.2 显式类型转换🎁1. C 风格强制类型转换🎁2. C 类型转换操作符 🎈1.3 C 类型转换操作符详解🎁1. static_cast🎁2. dynamic_cast&…...

Pytorch使用手册- TorchVision目标检测微调Tutorial的使用指南(专题十二)
这篇教程的目标是对一个预训练的 Mask R-CNN 模型进行微调,应用于 Penn-Fudan 行人检测与分割数据集。该数据集包含 170 张图像,里面有 345 个行人实例,我们将通过这个教程来演示如何使用 torchvision 中的新特性,训练一个面向自定义数据集的目标检测和实例分割模型。 注意…...

人工智能机器学习算法分类全解析
目录 一、引言 二、机器学习算法分类概述 (一)基于学习方式的分类 1. 监督学习(Supervised Learning) 2. 无监督学习(Unsupervised Learning) 3. 强化学习(Reinforcement Learning…...

Linux 35.6 + JetPack v5.1.4@DeepStream安装
Linux 35.6 JetPack v5.1.4DeepStream安装 1. 源由2. 步骤Step 1 安装Jetpack 5.1.4 L4T 35.6Step 2 安装依赖组件Step 3 安装librdkafkaStep 4 安装 DeepStream SDKStep 5 测试 deepstream-appStep 6 运行 deepstream-app 3. 总结3.1 版本问题3.2 二进制help 4. 参考资料 1. …...

图数据库 | 11、图数据库架构设计——高性能图存储架构(下)
在上篇内容中,老夫着重讲了高性能图存储系统的特点,咱们继续往下讲重点——高性能存储架构的设计思路!! 2.高性能存储架构设计思路 首先呢,存储架构以及核心数据结构的设计思路通常围绕如下4个维度来进行:…...

【HTTP】HTTP协议
一个Web Server就是个服务器软件(程序),或者是运行这个服务器软件的硬件(计算机),其主要功能是通过HTTP协议与客户端进行通信,来接收,存储,处理来自客户端的HTTP请求&…...

大数据新视界 -- Hive 基于 MapReduce 的执行原理(上)(23 / 30)
💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

SpringBoot源码解析(六):打印Banner
SpringBoot源码系列文章 SpringBoot源码解析(一):SpringApplication构造方法 SpringBoot源码解析(二):引导上下文DefaultBootstrapContext SpringBoot源码解析(三):启动开始阶段 SpringBoot源码解析(四):解析应用参数args Sp…...

【计算机网络】实验6:IPV4地址的构造超网及IP数据报
实验 6:IPV4地址的构造超网及IP数据报 一、 实验目的 加深对IPV4地址的构造超网(无分类编制)的了解。 加深对IP数据包的发送和转发流程的了解。 二、 实验环境 • Cisco Packet Tracer 模拟器 三、 实验内容 1、了解IPV4地址的构造超网…...

easy excel 生成excel 文件
导包 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.3</version> </dependency> 内容 List<类> limspjreport 值; String fileName sdf.format(new Date()) "-…...

Ajax:回忆与节点
一点回忆 面对我的Ajax学习,实现前后端交互,最开始我采用的使用网络寻找intellij IDEA Ultimate破解方法,然后最终成功,然后按照相关教程配置java ee项目,然后中间又去配置了Tomcat服务器,然后又去学习了一…...

Python+OpenCV系列:Python和OpenCV的结合和发展
PythonOpenCV系列:Python和OpenCV的结合和发展 **引言****Python语言的发展****1.1 Python的诞生与发展****1.2 Python的核心特性与优势****1.3 Python的应用领域** **OpenCV的发展****2.1 OpenCV的起源与发展****2.2 OpenCV的功能特性****2.3 OpenCV的应用场景** *…...

Ubuntu20.04 由源码编译安装opencv3.2 OpenCV
Ubuntu20.04 由源码编译安装opencv3.2.0 获取 opencv 及opencv_contrib源代码 创建目录以存放opencv及opencv_contrib源代码 mkdir ~/opencv3.2.0 cd ~/opencv3.2.0获取opencv源代码并切换到对应tag git clone https://github.com/opencv/opencv.git cd opencv git checkou…...

A058-基于Spring Boot的餐饮管理系统的设计与实现
🙊作者简介:在校研究生,拥有计算机专业的研究生开发团队,分享技术代码帮助学生学习,独立完成自己的网站项目。 代码可以查看项目链接获取⬇️,记得注明来意哦~🌹 赠送计算机毕业设计600个选题ex…...

RDIFramework.NET CS敏捷开发框架 SOA服务三种访问(直连、WCF、WebAPI)方式
1、介绍 在软件开发领域,尤其是企业级应用开发中,灵活性、开放性、可扩展性往往是项目成功的关键因素。对于C/S项目,如何高效地与后端数据库进行交互,以及如何提供多样化的服务访问方式,是开发者需要深入考虑的问题。…...

Linux——命名管道及日志
linux——进程间通信及管道的应用场景-CSDN博客 文章目录 目录 文章目录 前言 一、命名管道是什么? 理解: 2、编写代码 makefile 管道封装成类,想用中管道时只需要调用实例化 读端 写端 日志 1、日志是什么? 2、日志有什么&#x…...

Flink 常见面试题
1、Flink 的四大特征(基石) checkpoin基于Chandy-Lamport算法实现了分布式一致性快照提供了一致性的语义 state丰富的StateAPI time实现了Watermark机制,乱序数据处理,迟到数据容忍 window开箱即用的滚动,滑动会话窗口…...

rtc-pcf8563 0-0051: low voltage detected, date/time is not reliable
解决方法: 1、先测量pcf8563电源电压,是否满足要求。 2、pcf8563首次操作。第一次读取pcf8563的时间,未初始化,非法,芯片门槛电压检测配置不合理。使用hwclock命令写入一次,即可解决。 hwclock -f /dev/…...

(简单5步实现)部署本地AI大语言模型聊天系统:Chatbox AI + grok2.0大模型
摘要: 本文将指导您如何部署一个本地AI大语言模型聊天系统,使用Chatbox AI客户端应用和grok-beta大模型,以实现高效、智能的聊天体验。 引言: 由马斯克X-AI发布的Grok 2大模型以其卓越的性能超越了GPT4.0。Grok模型支持超长文本…...

MAUI APP开发蓝牙协议的经验分享:与跳绳设备对接
在开发MAUI应用程序时,蓝牙协议的应用是一个重要的环节,尤其是在需要与外部设备如智能跳绳进行数据交换的场景中。以下是我在开发过程中的一些经验和心得,希望能为你的项目提供帮助。 1. 蓝牙协议基础 蓝牙协议是无线通信的一种标准&#x…...

最新版Node.js下载安装及环境配置教程
目录 初识:Node.js 一、下载:Node.js 二、安装:Node.js 1.下载【node.js】压缩包安装文件 2.解压下载的安装包 3.打开解压的【node-v22.11.0-x64】文件夹 4.双击启动安装程序 5.点击【Next】 6.勾选【I accept the terms in the Lic…...

51c自动驾驶~合集39
我自己的原文哦~ https://blog.51cto.com/whaosoft/12707676 #DiffusionDrive 大幅超越所有SOTA!地平线DiffusionDrive:生成式方案或将重塑端到端格局? 近年来,由于感知模型的性能持续进步,端到端自动驾驶受到了来…...

单链表基础操作
文章目录 abstract定义结点结构初始化链表遍历链表求表长查找结点根据序号查找结点根据值查找结点 插入结点首尾位置插入一般位置插入(通用插入)找到尾元素|尾指针相关操作 删除结点 abstract 单链表是一种简单的动态数据结构,它由一系列结点组成,每个结…...

Asp.net MVC在VSCore中的页面的增删改查(以Blog项目为例),用命令代码
在VSCore中的页面的增删改查(以Blog项目为例) 1.创建项目(无解决方案)复杂项目才需要 dotnet new mvc -o Blog2.控制器 BlogsController.cs 控制器(Controller)名字和视图(View)中的文件名要一模一样 u…...

【Leecode】Leecode刷题之路第66天之加一
题目出处 66-加一-题目出处 题目描述 个人解法 思路: todo代码示例:(Java) todo复杂度分析 todo官方解法 66-加一-官方解法 方法1:找出最长的后缀9 思路: 代码示例:(Java&#…...

使用 VLC 在本地搭建流媒体服务器 (详细版)
提示:详细流程 避坑指南 Hi~!欢迎来到碧波空间,平时喜欢用博客记录学习的点滴,欢迎大家前来指正,欢迎欢迎~~ ✨✨ 主页:碧波 📚 📚 专栏:音视频 目录 借助VLC media pl…...

Ubuntu 常用解压与压缩命令
.zip文件 unzip FileName.zip # 解压 zip DirName.zip DirName # 将DirName本身压缩 zip -r DirName.zip DirName # 压缩,递归处理,将指定目录下的所有文件和子目录一起压缩 zip DirName.zip DirName 行为: 只压缩 DirName 目录本身ÿ…...

有什么做图文长图的网站吗/营销型网站名词解释
九年前,当史蒂夫布兰克(Steve Blank)在《Wired》杂志封面上出现的时候,他的游戏公司,Rocket Science Games,曾有望彻底改变电子游戏行业。在当时,布兰克完全没有被那些持怀疑态度的评论困扰到。 “当时我觉得我就是个…...

网站权重6了该则么做优化方案/电视剧排行榜
本节书摘来自异步社区《Python 3程序开发指南(第2版•修订版)》一书中的第2章,第2.3节,作者[英]Mark Summerfield,王弘博,孙传庆 译,更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.3…...

08服务器做网站/免费制作网站的软件
一、条件语句1. if语句if 语句用于控制程序的执行,基本形式为:if 判断条件1:执行语句elif 判断条件2:执行语句else:执行语句判断条件成立时,则执行后面的语句。执行内容可以多行,以缩进来区分表…...

网站ico在后台哪里找到/怎么关键词优化网站
在软件开发设计中我们经常会面对业务分析,提取领域问题,从而实现软件架构设计。关于 软件架构设计Martin Fowler在2004出版的《企业应用架构模式》中 概括了四种方式的架构模式。它们分别为事务性脚本,表驱动模式,活动记录模式&am…...
做公司网站协议书模板下载/百度下载老版本
地区 Photon Cloud 为您提供全球连接性,允许全世界的低延迟游戏。客户端的初始连接将连接到Photon Name Server,该服务器提供可用区域的列表。每个区域完全独立于其他区域,由主服务器(用于配对)和游戏服务器ÿ…...

移动端网站宽度做多大/时事新闻热点摘抄
作者简介: 李中凯 八年多工作经验 前端负责人, 擅长JavaScript/Vue。 掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts 公众号:1024译站 Web 浏览器无疑是用户访问互联网最常见的入口。浏览器凭借其免安装和…...