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

前端本地数据存储方式有哪些

news 来源：原创 2025/6/9 11:47:36

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

在前端开发中，本地数据存储是实现客户端数据持久化的关键技术。以下是几种常见的前端本地数据存储方式：

1. Cookies

Cookies 是浏览器用来存储数据的小文件，通常用于存储一些小量的数据，尤其是会话信息（如用户认证信息）。它们在客户端存储，可以跨页面访问，并且可以配置过期时间。

特点：

存储大小：每个 cookie 大小限制为 4KB。
有效期：可以设置过期时间（默认是会话结束后失效）。
跨页面共享：同一域名下的页面可以共享 cookies。
请求时自动发送：每次发送请求时，浏览器会自动将相关的 cookies 发送到服务器，适用于身份验证等。

示例：

// 设置 cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT";// 获取 cookie
let cookies = document.cookie;
console.log(cookies);// 删除 cookie（通过设置过期时间为过去的日期）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

缺点：

数据存储量小（4KB）。
数据会随着每次请求一起发送到服务器，增加网络负担。
安全性较差，容易受到跨站脚本攻击（XSS）。

2. LocalStorage

localStorage 提供了一种存储在客户端的数据存储方式，数据存储在浏览器中，即使页面关闭，数据依然会保留，直到显式删除。

特点：

存储大小：大约 5MB（不同浏览器可能有所不同）。
存储方式：数据以键值对的形式存储。
生命周期：数据永久存储，直到显式删除或浏览器的存储空间被清除。
仅客户端访问：localStorage 只能在客户端访问，不能跨窗口或跨标签页访问。

示例：

// 设置 localStorage
localStorage.setItem('username', 'John');// 获取 localStorage
let username = localStorage.getItem('username');
console.log(username); // "John"// 删除 localStorage
localStorage.removeItem('username');// 清空所有 localStorage 数据
localStorage.clear();

优点：

存储容量大（相比 cookies）。
数据在浏览器关闭后依然保持有效。
API 简单，支持同步操作。

缺点：

数据仅限于客户端存储，无法跨客户端同步。
存储的内容可以被 JavaScript 脚本访问，因此需要小心敏感数据的存储。
不支持跨域访问（每个域名下独立存储）。

3. SessionStorage

sessionStorage 是一种基于会话的存储方式，它与 localStorage 类似，但数据在浏览器窗口或标签页关闭时会自动清除。每个浏览器标签页或窗口都有独立的 sessionStorage。

特点：

存储大小：与 localStorage 类似，通常为 5MB。
生命周期：数据在浏览器会话期间有效，浏览器关闭时即丢失。
仅限同一会话：不同标签页或窗口中的 sessionStorage 不共享。

示例：

// 设置 sessionStorage
sessionStorage.setItem('sessionKey', 'value');// 获取 sessionStorage
let value = sessionStorage.getItem('sessionKey');
console.log(value); // "value"// 删除 sessionStorage
sessionStorage.removeItem('sessionKey');// 清空所有 sessionStorage 数据
sessionStorage.clear();

优点：

存储容量大。
会话级别的数据存储，关闭浏览器窗口或标签页时会自动清空。
简单易用。

缺点：

数据存储只在会话期间有效，无法在不同会话中共享。

4. IndexedDB

IndexedDB 是一种低级别的 API，用于存储大量结构化数据。它允许你存储更复杂的数据类型，如文件和二进制数据，并且支持异步操作。

特点：

存储容量：没有严格的大小限制，通常可以存储数 MB 或更多的数据。
数据类型：可以存储对象、数组、文件等复杂类型。
异步操作：支持异步操作，因此不会阻塞主线程。
浏览器支持：大多数现代浏览器都支持 IndexedDB。

示例：

// 打开（或创建）数据库
let request = indexedDB.open("MyDatabase", 1);request.onsuccess = function(event) {let db = event.target.result;// 创建一个对象存储let objectStore = db.createObjectStore("users", { keyPath: "id" });// 插入数据objectStore.add({ id: 1, name: "John", age: 30 });// 获取数据let getRequest = objectStore.get(1);getRequest.onsuccess = function() {console.log(getRequest.result); // { id: 1, name: "John", age: 30 }};
};request.onerror = function(event) {console.error("Database error:", event.target.errorCode);
};

优点：

支持存储复杂的数据（如对象、数组、二进制数据）。
存储量大。
支持异步操作，不会阻塞 UI 线程。
可以创建索引，以加速数据检索。

缺点：

API 比较复杂，使用上相对繁琐。
数据存储和检索速度可能会受到存储量和索引的影响。

5. Web SQL Database（已废弃）

Web SQL 是一种基于 SQL 的本地数据库 API，它可以在浏览器中存储结构化的数据，使用类似于 SQL 的语法进行操作。这个 API 已被大多数浏览器弃用，推荐使用 IndexedDB。

示例：

let db = openDatabase('MyDatabase', '1.0', 'Test Database', 2 * 1024 * 1024);// 创建表格
db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});// 插入数据
db.transaction(function (tx) {tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
});

特点：

基于 SQL，数据存储和查询类似于传统的数据库。
数据较为结构化。

缺点：

已被弃用，不推荐使用。
目前只有部分浏览器支持。

6. File System API (仅限于浏览器扩展或特定环境)

File System API 提供了更接近操作本地文件系统的能力，允许浏览器内的 Web 应用读写本地文件。这个 API 目前仅在特定的浏览器环境或扩展中可用，且并非所有浏览器都支持。

特点：

允许更直接的文件操作，如读取、写入和管理文件。
安全性较高，需要特定的权限。

缺点：

仅限特定环境或扩展，且使用较为复杂。

总结：

存储方式	存储容量	生命周期	支持的数据类型	特点
Cookies	4KB	会话或设置过期时间	简单的键值对	用于跨请求存储小型数据，常用于身份认证
LocalStorage	5MB（浏览器差异）	永久存储	键值对（字符串）	简单易用，数据永久存储
SessionStorage	5MB（浏览器差异）	会话期间	键值对（字符串）	会话级别的存储，浏览器关闭时清空
IndexedDB	较大（数 MB 或更多）	永久存储	对象、数组、二进制数据	支持复杂数据类型，异步操作
Web SQL	较大（不固定）	永久存储	结构化数据（SQL）	被弃用，不推荐使用
File System API	受限（特定环境）	永久存储	文件	允许直接操作文件，通常用于浏览器扩展

根据应用需求选择合适的存储方式，通常情况下 localStorage 和 sessionStorage 比较简单易用，而对于需要存储大量或复杂数据的情况，可以使用 IndexedDB。

前端本地数据存储方式有哪些

发现宝藏前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。在前端开发中，本地数据存储是实现客户端数据持久化的关键技术。以下是几种常见的前端本地数据存储方式： …...

编程日记 2025/5/31 10:34:04

python总说的cd是什么

以下适用于windows环境 cd就是change directory的缩写，即改变目录。讲cd命令之前，先来看看提示符是什么意思。现在的提示符是c:\> c:说明现在的工作盘是c盘，\告诉我们当前的工作目录是根目录。 >的作用是把工作目录和我们要输入的…...

编程日记 2025/5/31 8:33:52

Mybatis加密解密查询操作（sql前），where要传入加密后的字段时遇到的问题

项目场景： 提示：这里简述项目相关背景： 例如：Mybatis加密解密查询操作（sql前），where要传入加密后的字段时遇到的问题问题描述提示：这里描述项目中遇到的问题： 例如…...

编程日记 2025/6/3 20:26:40

Netdevops入门基础学习03

1、数据类型在Python中解释器会自动识别数据类型，但是在C语言中需要手动指定（故Python简单易学） 字符串： str（string） 在Python中加了引号的都是字符串整数： int (integer)浮点数： …...

编程日记 2025/5/29 16:41:47

什么是自然语言处理

01.什么是自然语言处理自然语言处理（Natural Language Processing，简称NLP）是一门跨学科领域，它结合了计算机科学、人工智能、语言学、心理学等多个学科的知识，旨在使计算机能够理解、解释、处理和生成人类语言。自然语言处理的目标是缩小人类语言和计算机之间的差距，使…...

编程日记 2025/6/2 18:56:28

网络安全怎么学习

当我们谈论网络安全时，我们正在讨论的是保护我们的在线空间，这是我们所有人的共享责任。网络安全涉及保护我们的信息，防止被未经授权的人访问、披露、破坏或修改。一、网络安全的基本概念网络安全是一种保护：它涉及保护我们的设…...

编程日记 2025/5/29 1:37:33

网络多层的协议详述

网络层 1）地址管理：制定一系列的规则，通过地址，在网络上描述出一个设备的位置 2）路由选择：网络环境比较复杂，从一个节点到另一个节点，存在很多条不同的路径，需要规划出…...

编程日记 2025/5/29 2:23:27

【C#】方法参数的修饰符ref 与 out

在 C# 中，ref 和 out 是方法参数的修饰符，用于将参数按引用传递，而不是按值传递。这允许方法修改调用者传递的变量的值。尽管它们的行为类似，但有重要的区别和适用场景。 1. ref 的含义与使用含义引用传递： 参数通…...

编程日记 2025/6/2 13:54:26

hpe服务器更新阵列卡firmware

背景操作系统：RHEL7.8 hpe服务器经常出现硬盘断开，阵列卡重启问题，导致系统hang住。只能手动硬重启。 I/O error，dev sda smartpqi 0000:5c:00:0: resettiong scsi 1:1:0:1 smartpqi 0000:5c:00:0: reset of scsi 1:1:0:1:…...

编程日记 2025/6/4 6:17:58

arcgisPro相接多个面要素转出为完整独立线要素

1、使用【面转线】工具，并取消勾选“识别和存储面邻域信息”，如下： 2、得到的线要素，如下：...

编程日记 2025/5/26 7:30:09

【机器学习】【集成学习——决策树、随机森林】从零起步：掌握决策树、随机森林与GBDT的机器学习之旅

这里写目录标题一、引言机器学习中集成学习的重要性二、决策树 (Decision Tree)2.1 基本概念2.2 组成元素2.3 工作原理分裂准则 2.4 决策树的构建过程2.5 决策树的优缺点（1）决策树的优点（2）决策树的缺点（3&#xff0…...

编程日记 2025/6/4 5:27:34

YOLOv8目标检测——详细记录使用ONNX Runtime进行推理部署C++/Python实现

概述在之前博客中有介绍YOLOv8从环境安装到训练的完整过程，本节主要介绍ONNX Runtime的原理以及使用其进行推理加速，使用Python、C两种编程语言来实现。 https://blog.csdn.net/MariLN/article/details/143924548?spm1001.2014.3001.5501 1. ONNX Ru…...

编程日记 2025/6/3 18:05:29

联合物种分布模型（JSDM）与Hmsc包：群落生态学数据分析与预测技术

联合物种分布模型（Joint Species Distribution Modelling，JSDM）在生态学领域，特别是群落生态学中发展最为迅速，它在分析和解读群落生态数据的革命性和独特视角使其受到广大国内外学者的关注。在学界不同研究团队研发出…...

编程日记 2025/5/30 15:19:00

蓝桥杯——竞赛省赛国赛题分享

目录一.[蓝桥杯 2013 省 AB] 错误票据代码如下： 二.[蓝桥杯 2024 省 Java B] 报数游戏代码如下： 讲解： 三.[蓝桥杯 2014 国 C] 拼接平方数代码如下： 四.三步问题（递归，上台阶） 代码…...

编程日记 2025/6/4 6:31:41

【ubuntu18.04】ubuntu18.04挂在硬盘出现 Wrong diagnostic page； asked for 1 got 8解决方案

错误日志 [ 8754.700227] usb 2-3: new full-speed USB device number 3 using xhci_hcd [ 8754.867389] usb 2-3: New USB device found, idVendor0e0f, idProduct0002, bcdDevice 1.00 [ 8754.867421] usb 2-3: New USB device strings: Mfr1, Product2, SerialNumber0 [ 87…...

编程日记 2025/5/29 5:34:56

Hive其一，简介、体系结构和内嵌模式、本地模式的安装

目录一、Hive简介二、体系结构三、安装 1、内嵌模式 2、测试内嵌模式 3、本地模式--最常使用的模式一、Hive简介 Hive 是一个框架，可以通过编写sql的方式，自动的编译为MR任务的一个工具。在这个世界上，会写SQL的人远远大于会写ja…...

编程日记 2025/6/3 4:13:35

如何在 Ubuntu 上安装 NodeBB 并使用 Nginx 反向代理

简介 NodeBB 是一款基于 Node.js 的开源论坛软件，为在线社区提供了现代化和响应式的解决方案。在 Ubuntu Linux 上运行的 NodeBB 利用了操作系统的强大性和灵活性，以提供高性能和可扩展性。它结合了 MongoDB 或 Redis 进行数据库管理，使其能…...

编程日记 2025/6/3 19:58:47

Linux脚本语言学习--下

4.Bash的变量 4.1.用户自定义变量 4.1.1.什么是变量变量是计算机内存的单元，其中存放的值可以改变。当Shell脚本需要保存一些信息的时候，如一个文件名或是一个数字，就把他存放在一个变量中。每个变量有一个名字，所以很容易引用…...

编程日记 2025/6/4 10:37:27

基于Spring Boot的医院质控上报系统

一、系统背景与意义医院质控上报系统旨在通过信息化手段，实现医院质量控制的标准化、流程化和自动化管理。该系统能够帮助医院实时监控医疗质量数据，及时发现和处理潜在的质量问题，从而确保医疗服务的安全性和有效性。同时，系统…...

编程日记 2025/5/31 12:57:54

React 第十七节 useMemo用法详解

概述 useMemo 是React 中的一个HOOK，用于根据依赖在每次渲染时候缓存计算结果； 大白话就是，只有依赖项发生变化时候，才会重新渲染为新计算的值，否则就还是取原来的值，有点类似 vue 中的 computed 计算属性…...

编程日记 2025/6/3 1:24:45

大模型呼入机器人系统如何建设？

大模型呼入机器人系统如何建设？ 作者：开源呼叫中心系统 FreeIPCC, Github地址：https://github.com/lihaiya/freeipcc 大模型呼叫中心呼入机器人系统的建设是一个涉及多个环节和领域的综合性工程。以下是一个详细的步骤指南，涵盖了…...

编程日记 2025/6/4 0:26:14

【Java 学习】详细讲解---包和导包、Scanner类、输入源

1. 包 1.1 什么是包？ 举个例子，你和你的同学有不同的家庭，你们都有自己的爸爸妈妈，都有自己的家。在自己的家中你们可以按照自己爱好摆放东西，都互不干扰。但是，假如你们的家都在一起，你们就不…...

编程日记 2025/6/4 1:37:16

java开发入门学习四-运算符

运算符运算符： 运算法是一种特殊的符号，标识数据的运算，赋值等根据分类算数运算符和前端运算法的方式是一致的，这里简单的描述% -- %: 取余 ：增加 --： 减少 class Computed {public static voi…...

编程日记 2025/5/30 14:46:46

2009 ~ 2019 年 408【操作系统】大题解析

2009 年讲解视频推荐：【BOK408真题讲解-2009年（催更就退网版）】 1. 同步与互斥（7’） 三个进程 P1, P2, P3 互斥使用一个包含 N（N > 0）个单元的缓冲区。P1 每次用 produce() 生成一个正整数…...

编程日记 2025/6/2 7:19:31

RestTemplate实时接收Chunked编码传输的HTTP Response

学习调用AI接口的时候，流式响应都是使用的 Transfer-Encoding: chunked，图方便想用RestTemplate，但是平时用到的都是直接返回响应对象的类型。使用bing搜索到一种方式，使用下面的代码来读取，于是掉这个坑里了&#xff…...

编程日记 2025/5/29 17:22:16

Java设计模式 —— 【结构型模式】适配器模式（类的适配器、对象适配器、接口适配器）详解

文章目录基本介绍一、类的适配器二、对象适配器三、接口适配器总结基本介绍生活中有很多例子： 不同国家的插座接口不同，需要转换器；家用电源220V，手机只接受5V充电，需要转换器；读卡器，拓展…...

编程日记 2025/6/2 19:19:26

RabbitMQ 消息持久化/镜像队列/lazy对时延影响

测试背景： 不同条件下RabbitMQ不同队列类型的生产时延测试： 测试环境： 机型：rabbimtq.2u4g.cluster 背景流量：1000 TPS 测试条件： 消息大小 4k，消息条数为1000条，时延取值为平均…...

编程日记 2025/6/4 8:17:56

SQL在线格式化 - 加菲工具

SQL在线格式化打开网站加菲工具选择“SQL 在线格式化” 或者直接访问 https://www.orcc.online/tools/sql 输入sql，点击上方的格式化按钮即可输入框得到格式化后的sql结果...

编程日记 2025/5/9 0:13:02

【vue】在页面右下角添加悬浮按钮组件

效果图： 如上图所示，需要在页面的左下角添加一个悬浮按钮，鼠标放上去时候展示更多详细按钮，点击触发相应方法。 <div class"floating-component"><el-tooltip placement"left&qu…...

编程日记 2025/5/31 20:20:47

MyBatis-Plus中isNull与SQL语法详解：处理空值的正确姿势

目录前言1. 探讨2. 基本知识3. 总结前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 基本的Java知识推荐阅读： java框架零基础从入门到精通的学习路线附开源项目面经等（超全&#x…...

编程日记 2025/5/27 22:51:09

C语言(指针练习2)

编写函数,要求用指针做形参，分别实现以下功能： （1）求一个字符串长度 （2）在一个字符串中统计大写字母的个数 （3）在一个字符串中统计数字字符的个数 #include <stdio.h>int str…...

编程日记 2025/6/2 12:15:38

ES6学习Symbol（五）

这里写目录标题一、概述二、代码一、概述 ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是： undefined 、 null 、布尔值（Boolean）、字符串（St…...

编程日记 2025/6/3 21:27:34

简易分页制作

简易分页功能实现分页是一种常见的前端功能，特别是在需要展示大量数据时。它通过将数据分割成多个页面，帮助用户更容易浏览并提高页面加载性能。本文将介绍一个简易分页的实现思路及其代码实现，旨在帮助开发者快速理解并实现分页功能。功…...

编程日记 2025/6/3 0:54:28

概率论得学习和整理27：关于离散的数组随机变量数组的均值，方差的求法3种公式，思考和细节。

目录 1 例子1：最典型的，最简单的数组的均值，方差的求法 2 例子1的问题：例子1只是1个特例，而不是普遍情况。 2.1 例子1各种默认假设，导致了求均值和方差的特殊性，特别简单。 2.2 我觉得加权…...

编程日记 2025/6/4 17:58:04

arXiv-2024 | NavAgent：基于多尺度城市街道视图融合的无人机视觉语言导航

作者：Youzhi Liu, Fanglong Yao*, Yuanchang Yue, Guangluan Xu, Xian Sun, Kun Fu 单位：中国科学院大学电子电气与通信工程学院，中国科学院空天信息创新研究院网络信息系统技术重点实验室原文链接：NavAgent: Multi-scale Urba…...

编程日记 2025/5/31 8:18:57

WPF 布局控件

wpf 布局控件有很多，常用的有：Grid, UniformGrid, Border, StackPanel, WrapPanel, DockPanel。 1. Grid Grid 经常作为控件的 Content 使用，常作为 Windows, UserControl 等 UI 元素的根节点。它用来展示一个 n 行 n 列的排版。因此就有…...

编程日记 2025/6/2 5:38:03

在Mac电脑上安装adb环境

当你在命令行输入 adb version 或adb devices, 报错：zsh: command not found: adb ，那么说明你的 Mac 上没有安装 ADB（Android Debug Bridge），或者它没有添加到你的路径中。你可以按照以下步骤安装和配置 ADB&#xff…...

编程日记 2025/5/31 18:48:04

方正畅享全媒体新闻采编系统 reportCenter.do SQL注入漏洞复现

0x01 产品简介方正畅享全媒体新闻生产系统是以内容资产为核心的智能化融合媒体业务平台，融合了报、网、端、微、自媒体分发平台等全渠道内容。该平台由协调指挥调度、数据资源聚合、融合生产、全渠道发布、智能传播分析、融合考核等多个平台组成，贯穿新闻生产策、采、编、发…...

编程日记 2025/6/2 2:57:47

Linux SHELL脚本中的常用命令

一.设置主机名称 1.文件的方式 [rootlocalhost 桌面]# vim /etc/hostname [rootlocalhost 桌面]# cat /etc/hostname shell.aaa.org 修改完毕文件后在当前的shell中是不生效的如果需要看到效果，关闭当前shell后重新开启新的shell 2.通过命令更改主机名 [rootl…...

编程日记 2025/5/29 0:27:46

Go语言启动独立进程

文章目录问题解决方案1. **将 npc.exe 启动为独立的进程**2. **修改 exec.Command 函数**示例代码解释为什么这样有效注意问题在你当前的代码中，调用 exec.Command("XXX.exe") 启动 XXX.exe 程序时，这个程序是由 Go 程序直接启动的。如果 …...

编程日记 2025/6/3 20:42:29

STM32中ADC模数转换器

一、ADC简介 ADC模拟-数字转换器 ADC可以将引脚连续变化的模拟电压转换为内存中存储的数字变量，建立模拟电路到数字电路的桥梁 12位逐次逼近型ADC，1us转换时间输入电压范围： 0~3.3V，转换结果范围：0~4095 18个输入…...

编程日记 2025/6/1 0:29:53

为什么要用单例模式？

‌单例模式是一种创建型设计模式，用于确保某个类只有一个实例，并提供一个全局访问点，使得其他类可以轻松访问该实例‌。使用单例模式的主要原因包括以下几点：‌ ‌确保唯一性‌：在某些情况下，我们需要确…...

编程日记 2025/5/31 10:53:52

线性表查找：Python 实现与性能分析

引言在数据处理领域，查找操作是一项基础且关键的任务。线性表作为一种常见的数据结构，其查找算法的效率直接影响程序的性能。本文将深入探讨线性表查找的原理、Python 实现以及性能分析，为你揭示如何在 Python 中高效地进行线性表查找。一…...

编程日记 2025/6/1 18:34:57

QT3学习之进阶理解信号和槽：如何自定义一个类信号，供其它类调用槽函数

下面是QWidget源码，定义了两个事件 /*!This event handler can be reimplemented in a subclass to receivewidget enter events.An event is sent to the widget when the mouse cursor enters thewidget.\sa leaveEvent(), mouseMoveEvent(), event() */void QWi…...

编程日记 2025/6/3 13:31:18