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

如何处理前端本地存储和缓存

news 2025/7/6 21:52:37

前端本地存储和缓存的处理是一种重要的技术，它可以帮助改善应用程序的性能和用户体验。下面是一些处理前端本地存储和缓存的常用方法：

1. 使用Web Storage API：

这是一种在浏览器中存储数据的方法，包括两种类型：localStorage和sessionStorage。localStorage没有过期时间，而sessionStorage在用户关闭浏览器窗口时被清除。这些存储空间可以用来存储用户数据、配置设置等。

2. 使用Cookies：

Cookies是在浏览器中存储小量数据的一种标准方法。它们可以用于保存用户登录信息、个性化设置等。然而，由于安全和隐私原因，对Cookies的使用需要谨慎。

3. 使用IndexedDB：

这是一种在浏览器中存储大量结构化数据的Web API。它比LocalStorage和SessionStorage更快速，容量更大。

4. 使用Service Workers和Cache API：

这是处理浏览器缓存的新方法。Service Workers可以拦截和处理网络请求，包括程序化缓存和响应。Cache API允许你创建、读取、更新和删除缓存。这可以用来缓存资源，如图像、JavaScript文件、HTML页面等，以便在离线时也能访问。

5. 使用离线应用和AppCache：

离线应用是指能在离线状态下运行的应用程序。AppCache是一种为离线应用提供缓存的机制，它可以缓存资源文件，以便在离线时也能访问。然而，AppCache已被Service Workers和Cache API所取代。

6. 使用Web SQL数据库：

这是一种在浏览器中存储结构化数据的机制。它使用标准的SQL语法，可以在浏览器中执行SQL查询。然而，Web SQL已被IndexedDB所取代。

7. 使用缓存策略：

例如HTTP缓存、CDN缓存、预加载、懒加载等。这些策略可以减少服务器负载，提高网页加载速度，改善用户体验。

处理前端本地存储和缓存时，需要注意以下几点：

  • 数据的安全性和隐私性。需要确保存储在本地或缓存中的数据不被非法获取和使用。
  • 数据的持久性和可用性。需要确保存储在本地或缓存中的数据不会丢失，并且在需要时可以随时访问。
  • 数据的更新和同步。需要确保存储在本地或缓存中的数据可以及时更新，并且在多个设备或浏览器之间同步。

详细解析

对于7种处理前端本地存储和缓存的方法，这里给出每种方法的代码解析：

  1. 使用Web Storage API
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
  1. 使用Cookies
// 存储数据
document.cookie = "key=value; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
// 获取数据
var x = document.cookie;
// 删除数据
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
  1. 使用IndexedDB
// 打开数据库
var openRequest = indexedDB.open("myDatabase", 1);
// 创建对象存储空间
openRequest.onupgradeneeded = function() {var db = openRequest.result;db.createObjectStore("myStore");
};
// 存储数据
openRequest.onsuccess = function() {var db = openRequest.result;var tx = db.transaction("myStore", "readwrite");var store = tx.objectStore("myStore");store.put("value", "key");
};
// 获取数据
openRequest.onsuccess = function() {var db = openRequest.result;var tx = db.transaction("myStore", "readonly");var store = tx.objectStore("myStore");var getRequest = store.get("key");getRequest.onsuccess = function() {console.log(getRequest.result);};
};
  1. 使用Service Workers和Cache API
// 注册 Service Worker
navigator.serviceWorker.register('/sw.js').then(function(registration) {// 注册成功，更新缓存registration.update();
}).catch(function(err) {// 注册失败，输出错误信息console.log(err);
});
// 在 Service worker 中缓存资源
self.addEventListener('install', function(event) {event.waitUntil(caches.open('myCache').then(function(cache) {return cache.addAll(['/path/to/image1', '/path/to/image2']);}));
});
// 在 Service worker 中响应缓存请求
self.addEventListener('fetch', function(event) {event.respondWith(caches.match(event.request).then(function(response) {return response || fetch(event.request);}));
});
  1. 使用离线应用和AppCache

在HTML文件中，需要添加一个manifest文件，指向appcache文件。

<html manifest="app.appcache"><!-- 页面内容 -->
</html>

在appcache文件中，列出需要缓存的资源。

CACHE MANIFEST
# version 1.0
/path/to/image1
/path/to/image2

需要注意的是，AppCache已经被Service Workers和Cache API所取代，但是在某些浏览器中仍然可以使用。

  1. 使用Web SQL数据库
// 打开数据库
var db = openDatabase("myDatabase", "1.0", "myDatabase", 2 * 1024 * 1024);
// 创建数据表
db.transaction(function(tx) {tx.executeSql("CREATE TABLE IF NOT EXISTS myTable (id INTEGER PRIMARY KEY, name TEXT)");
});
// 存储数据
db.transaction(function(tx) {tx.executeSql("INSERT INTO myTable (name) VALUES (?)", ["value"]);
});
// 获取数据
db.transaction(function(tx) {tx.executeSql("SELECT * FROM myTable", [], function(tx, results) {var len = results.rows.length;for (var i = 0; i < len; i++) {console.log(results.rows.item(i).name);}});
});

需要注意的是，Web SQL已经被IndexedDB所取代。

  1. 使用缓存策略

可以通过设置HTTP缓存头，如Cache-Control和Expires，来控制浏览器如何缓存资源。此外，还可以使用CDN缓存、预加载和懒加载等技术来优化性能。这些策略需要根据具体的应用程序和需求进行选择和配置。

相关文章：

如何处理前端本地存储和缓存

前端本地存储和缓存的处理是一种重要的技术&#xff0c;它可以帮助改善应用程序的性能和用户体验。下面是一些处理前端本地存储和缓存的常用方法&#xff1a; 1. 使用Web Storage API&#xff1a; 这是一种在浏览器中存储数据的方法&#xff0c;包括两种类型&#xff1a;loca…...

编程日记 2023/11/6 16:05:09

导轨式安装压力应变桥信号处理差分信号输入转换变送器0-10mV/0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

主要特性 DIN11 IPO 压力应变桥信号处理系列隔离放大器是一种将差分输入信号隔离放大、转换成按比例输出的直流信号导轨安装变送模块。产品广泛应用在电力、远程监控、仪器仪表、医疗设备、工业自控等行业。此系列模块内部嵌入了一个高效微功率的电源&#xff0c;向输入端和输…...

编程日记 2023/11/6 16:04:08

人体姿态估计和手部姿态估计任务中神经网络的选择

一、人体姿态估计任务适合使用卷积神经网络&#xff08;CNN&#xff09;来解决。 人体姿态估计任务的目标是从给定的图像或视频中推断出人体的关节位置和姿势。这是一个具有挑战性的计算机视觉任务&#xff0c;而CNN在处理图像数据方面表现出色。 使用CNN进行人体姿态估计的一种…...

编程日记 2023/11/6 16:03:07

odoo16 one2many字段的 domain

最近在odoo project模块的基础上做二开&#xff0c;给task表加了一个版本字段version_id&#xff0c;然后重写了 project表的Task_ids, 并且增加了一个domain&#xff0c;结果折腾了大半天才搞定 写法1 这也是最初的写法&#xff1a; version_id fields.Many2one("hx.p…...

编程日记 2023/11/6 16:02:05

一份优秀测试用例的设计策略

日常工作中最为基础核心的内容就是设计测试用例&#xff0c;什么样的测试用例是好的测试用例?我们一般会认为数量越少、发现缺陷越多的用例就是好的用例。那么我们如何才能设计出好的测试用例呢&#xff1f;一份好的用例是设计出来的&#xff0c;是测试人员思路和方法的集合&a…...

编程日记 2023/11/6 16:01:04

自动驾驶行业观察之2023上海车展-----智驾供应链(3)

智驾解决方案商发展 华为&#xff1a;五项重磅技术更新&#xff0c;重点发布华为ADS 2.0和鸿蒙OS 3.0 1&#xff09;产品方案&#xff1a;五大解决方案都有了全面的升级&#xff0c;分别推出了ADS 2.0、鸿蒙OS 3.0、iDVP智能汽车数字平台、智能车云服务和华为车载光最新 产品…...

编程日记 2023/11/6 15:59:02

倒计时丨3天后，我们直播间见！

倒计时3天&#xff0c;RestCloud 零代码集成自动化平台重磅发布 ⏰11 月 9 日 14:00&#xff0c;期待您的参与&#xff01; 点击报名&#xff1a;http://c.nxw.so/dfaJ9...

编程日记 2023/11/6 15:58:01

c语言经典算法—二分查找，冒泡，选择，插入，归并，快排，堆排

一、二分查找 1、前提条件&#xff1a;数据有序&#xff0c;随机访问&#xff1b; 2、实现&#xff1a;递归实现&#xff0c;非递归实现 3、注意事项&#xff1a; 循环退出条件:low <high,low high.说明还有一个元素&#xff0c;该元素还要与key进行比较 mid的取值&#xf…...

编程日记 2023/11/6 15:57:00

网站SSL证书有什么用

在当今&#xff0c;网站安全对于企业和个人来说至关重要。其中&#xff0c;SSL证书在保护网站和用户数据方面发挥着关键作用。 1&#xff0c;数据加密保护&#xff1a;SSL证书通过使用加密技术&#xff0c;将网站与访问者之间的通信进行加密。这意味着通过SSL保护的网站上的数据…...

编程日记 2023/11/6 15:55:59

ubuntu 20.04 server安装

ubuntu 20.04 server安装 ubuntu-20.04.6-live-server-amd64.iso 安装 安装ubuntu20.04 TLS系统后&#xff0c;开机卡在“A start job is running for wait for network to be Configured”等待连接两分多钟。 cd /etc/systemd/system/network-online.target.wants/在[Servi…...

编程日记 2023/11/6 15:54:58

造数工具调研

开源项目 语言 地址 描述 备注 Faker Python https://github.com/joke2k/faker 一个Python库&#xff0c;可以生成各种各样的假数据&#xff0c;包括SQL语句。它支持多种数据库&#xff0c;包括MySQL、PostgreSQL、Oracle等。Faker可以生成各种类型的数据&#xff0c;如…...

编程日记 2023/11/6 15:53:57

Linux文件系统目录结构

典型的Linux文件系统目录结构的列表 典型的Linux文件系统目录结构的列表。每个目录都有其特定的用途&#xff1a; /bin: 存放系统引导和修复所需的二进制可执行文件&#xff0c;如ls&#xff0c;cp&#xff0c;mv等命令。 /boot: 存放操作系统引导文件&#xff0c;例如内核和…...

编程日记 2023/11/6 15:52:55

CANoe新建XML自动化Test Modules

文章目录 1.打开Test Modules2.新建Environment3.新建XML Test Modules4.新建.can文件5.打开XML Test Modules6.新建xml脚本并保存7.编译8.在.can文件写个测试用例9.修改报告格式为HTML10.运行查看报告后面介绍的文章会重复用到这部分，这里单独介绍下，后面不做重复介绍。 1.…...

编程日记 2023/11/6 15:51:54

国内某发动机制造工厂RFID智能制造应用解决方案

一、工厂布局和装备 国内某发动机制造工厂的装配车间布局合理&#xff0c;设备先进&#xff0c;在这个5万平方米的生产区域内&#xff0c;各个工位之间流程紧密&#xff0c;工厂采用了柔性设备&#xff0c;占比达到了67%&#xff0c;数控化率超过90%&#xff0c;自动化率达到了…...

编程日记 2023/11/6 15:50:52

【SpringCloud Alibaba -- Nacos】Linux 搭建 Nacos 集群

搭建 Nacos 集群 架构 centos安装docker https://docs.docker.com/engine/install/centos/ 详细配置过程 MySql8 mysql数据库配置 数据库脚本 nacos/conf/nacos-mysql.sql Nacos2 application.properties 修改为mysql spring.datasource.platformmysqldb.num1 db.url…...

编程日记 2023/11/6 15:49:51

程序员使用 ChatGPT的 10 种最佳方式

自2022年11月30日发布以来&#xff0c;ChatGPT持续爆火&#xff0c;它在各个方面都产生了巨大的影响力&#xff0c;在软件开发行业&#xff0c;ChatGPT 有潜力彻底改变我们思考和处理软件开发的方式。 ChatGPT 正在改变软件开发流程&#xff0c;它理解自然语言和生成类人文本的…...

编程日记 2023/11/6 15:48:50

各种各类好用热门API推荐

各种各类的好用API推荐&#xff0c;含免费次数~ 天气预报查询&#xff1a;查询全国以及全球多个城市的天气&#xff0c;包含15天天气预报查询。天气预警&#xff1a;可以获取指定城市当前生效中的各类天气预警&#xff0c;如寒潮蓝色预警信号&#xff0c;或一次性拉取全国所有…...

编程日记 2023/11/6 15:47:48

高速串行总线——SATA

SATA简介 SATA的全称是Serial Advanced Technology Attachment(串行高级技术附件&#xff0c;一种基于行业标准的串行硬件驱动器接口)&#xff0c;它是一种电脑总线&#xff0c;主要功能是用作主板和大量存储设备&#xff08;如硬盘及光盘驱动器&#xff09;之间的数据传输 SA…...

编程日记 2023/11/6 15:46:48

不用流氓软件，如何在户外使用手机听下载到家中电脑里的音乐文件呢？

文章目录 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是本教程使用环境&#xff1a;1 群晖系统安装audiostation套件2 下载移动端app3 内网穿透&#xff0c;映射至公网 很多老铁想在上班路上听点喜欢的歌或者相声解解闷儿&#xff0c;于是打开手…...

编程日记 2023/11/6 15:45:47

函数数组指针示例

函数数组指针是一个指向函数指针数组的指针。它用于存储一组函数指针&#xff0c;使您可以通过函数指针数组的索引来调用不同的函数。函数数组指针通常用于实现函数表或分发不同的操作或处理不同的事件。 以下是一个简单的示例&#xff0c;说明如何声明和使用函数数组指针&…...

编程日记 2023/11/6 15:44:46

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/7/5 9:34:55

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/7/4 12:08:14

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/7/6 1:00:14

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/7/6 2:32:42

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/7/5 2:54:24

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/6/25 22:18:39

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/7/6 16:56:31

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/6/16 11:26:44