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

前端本地存储数据:深入解析与代码示例(Cookie、LocalStorage、SessionStorage和IndexedDB)

在现代Web应用中,前端本地存储是实现用户个性化体验的关键技术。本文将深入探讨前端本地存储的四种主要技术:Cookie、LocalStorage、SessionStorage和IndexedDB,并提供具体的代码示例。

Cookie

简介

Cookie是由服务器创建并存储在用户浏览器中的小块数据,用于跟踪会话状态和存储用户偏好。

特点

  • 大小限制:一般限制在4KB左右。
  • 与服务器通信:每次HTTP请求都会携带Cookie,增加服务器负载。
  • 安全性:容易受到跨站脚本攻击(XSS)和跨站请求伪造(CSRF)的威胁。

使用场景

  • 会话管理
  • 用户认证

代码示例

设置Cookie:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

读取Cookie:

function getCookie(name) {let cookieArray = document.cookie.split(';');for (let i = 0; i < cookieArray.length; i++) {let cookie = cookieArray[i].trim();if (cookie.indexOf(name + "=") == 0)return cookie.substring(name.length + 1, cookie.length);}return "";
}
console.log(getCookie("username")); // 输出: John Doe

LocalStorage

简介

LocalStorage提供了一种在用户浏览器中存储数据的方式,数据存储在客户端,且没有时间限制。

特点

  • 存储容量:通常为5MB左右。
  • 数据持久性:数据在浏览器关闭后依然存在。
  • 同步性:数据存储是同步的,可能会阻塞UI线程。

使用场景

  • 存储用户偏好设置
  • 缓存数据以减少服务器请求

代码示例

存储数据:

localStorage.setItem('user', 'John Doe');

读取数据:

let user = localStorage.getItem('user');
console.log(user); // 输出: John Doe

删除数据:

localStorage.removeItem('user');

SessionStorage

简介

SessionStorage与LocalStorage类似,但它存储的数据只在当前会话中有效,关闭浏览器标签或窗口后数据会被清除。

特点

  • 会话限制:数据只在会话期间有效。
  • 容量:通常为5MB左右。

使用场景

  • 表单数据暂存
  • 临时数据存储

代码示例

存储数据:

sessionStorage.setItem('sessionUser', 'Jane Doe');

读取数据:

let sessionUser = sessionStorage.getItem('sessionUser');
console.log(sessionUser); // 输出: Jane Doe

删除数据:

sessionStorage.removeItem('sessionUser');

IndexedDB

简介

IndexedDB是一个更强大的客户端存储解决方案,支持存储大量结构化数据,包括文件/blobs。

特点

  • 存储容量:通常没有硬性限制,但受到浏览器和用户磁盘空间的限制。
  • 异步API:不会阻塞UI线程。
  • 索引:支持创建索引以优化查询性能。

使用场景

  • 复杂数据存储
  • 大量数据的本地缓存

代码示例

打开数据库:

let request = window.indexedDB.open("myDatabase", 1);request.onerror = function(event) {console.log("Database error: " + event.target.errorCode);
};request.onsuccess = function(event) {let db = event.target.result;console.log("Database opened successfully");
};request.onupgradeneeded = function(event) {let db = event.target.result;let objectStore = db.createObjectStore("users", { keyPath: "id" });objectStore.createIndex("name", "name", { unique: false });
};

存储数据:

let db = request.result;
let transaction = db.transaction(["users"], "readwrite");
let objectStore = transaction.objectStore("users");
let user = { id: 1, name: "Alice", email: "alice@example.com" };objectStore.add(user);

读取数据:

let transaction = db.transaction(["users"], "readonly");
let objectStore = transaction.objectStore("users");
let request = objectStore.get(1);request.onsuccess = function(event) {let user = event.target.result;console.log(user);
};

最佳实践

  1. 安全性:对存储在本地的数据进行加密,尤其是在LocalStorage和IndexedDB中。
  2. 数据同步:对于需要跨设备同步的数据,考虑使用服务端同步机制。
  3. 容量管理:合理估计所需存储空间,避免超出浏览器限制。
  4. 性能优化:使用IndexedDB的异步API避免UI阻塞。
  5. 隐私保护:明确告知用户哪些数据将被存储,并提供数据清除选项。

结论

前端本地存储技术为开发者提供了多种选择,以满足不同的应用场景。选择合适的存储技术并遵循最佳实践,可以显著提升用户体验和应用性能。随着Web技术的发展,这些技术也在不断进化,为开发者提供更多的工具和选项。

相关文章:

前端本地存储数据:深入解析与代码示例(Cookie、LocalStorage、SessionStorage和IndexedDB)

在现代Web应用中&#xff0c;前端本地存储是实现用户个性化体验的关键技术。本文将深入探讨前端本地存储的四种主要技术&#xff1a;Cookie、LocalStorage、SessionStorage和IndexedDB&#xff0c;并提供具体的代码示例。 Cookie 简介 Cookie是由服务器创建并存储在用户浏览…...

Java语言程序设计基础篇_编程练习题*18.21 (将十进制数转换为二进制数)

*18.21 (将十进制数转换为二进制数) 编写一个递归方法&#xff0c;将一个十进制数转换为一个二进制数的字符串。方法头如下: public static String dec2Bin(int value)编写一个测试程序&#xff0c;提示用户输入一个十进制数&#xff0c;然后显示等价的二进制数。 代码示例 …...

中年转行新可能:18 个月迈向大模型提示词工程师

【导读】 人到中年&#xff0c;想半路转行成为大模型提示词工程师&#xff0c;这可行吗&#xff1f;最近&#xff0c;一位国外小哥成功转行&#xff0c;他在一篇干货满满的硬核博客中给出了答案&#xff1a;完全可行&#xff01; 转行成为大模型提示词工程师&#xff0c;到底…...

C++通过返回值和输出参数的原理是什么?分别有什么优势和缺点?

C中&#xff0c;通过返回值和输出参数&#xff08;通常是通过引用或指针&#xff09;是函数与外部世界交换数据的两种主要方式。它们各自有着不同的原理和优缺点。 通过返回值 原理&#xff1a; 当函数通过返回值向调用者传递数据时&#xff0c;它实际上是在函数执行完毕后&…...

AI客服机器人开启企业客户服务新纪元

随着人工智能(AI)技术的迅猛发展&#xff0c;使得AI客服机器人走进了我们的视野&#xff0c;成为提高客户满意度和业务效率的不二法宝。这些智能机器人不仅能够处理海量信息&#xff0c;还能为客户提供个性化的服务体验。 一、AI客服机器人的基本原理 AI客服机器人是基于人工智…...

TPM项目课题的确定需要考虑哪些因素?

确定一个合适的TPM项目课题&#xff0c;是企业启动并成功实施TPM计划的第一步。这一过程不仅需要深入洞察企业现状&#xff0c;还需前瞻性地规划未来发展。详情如深圳天行健精益化生产管理咨询公司下文所述&#xff1a; 一、企业战略目标 1.与企业长期发展规划的契合度 -TPM项…...

Rust 数据类型

文章目录 发现宝藏1. 标量类型1.1 整型1.2 浮点型1.3 布尔型1.4 字符型 2. 复合类型2.1 元组2.2 数组 3. 总结 发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【宝藏入口】。 Rust 是一种静态…...

C#无标题栏窗体拖动

要实现C#无标题栏窗体的拖动功能&#xff0c;可以通过以下步骤实现&#xff1a; 在窗体的构造函数中添加以下代码&#xff0c;以去掉标题栏&#xff1a; this.FormBorderStyle FormBorderStyle.None;然后&#xff0c;添加以下代码以处理鼠标按下事件&#xff1a; private c…...

MySQL容器配置连接数数,镜像重启生效

若有不理解&#xff0c;可以问一下这几个免费的AI网站 https://ai-to.cn/chathttp://m6z.cn/6arKdNhttp://m6z.cn/6b1quhhttp://m6z.cn/6wVAQGhttp://m6z.cn/63vlPw 方法一 在 docker-compose.yml 中配置 MySQL 的连接数&#xff0c;可以通过环境变量或配置文件来实现。以下…...

《OpenCV计算机视觉》—— 身份证号码识别案例

文章目录 一、案例实现的整体思路二、代码实现1.首先定义两个函数2.模板图像中数字的定位处理3.身份证号码数字的定位处理4.使用模板匹配&#xff0c;计算匹配得分&#xff0c;找到正确结果 一、案例实现的整体思路 下面是一个数字0~9的模板图片 案例身份证如下&#xff1a; 对…...

如何使用正则表达式替换字符串中的特定位置数字

如何使用正则表达式替换字符串中的特定位置数字 1、效果 把字符串中的第一个123替换掉: 2、代码 使用正则中的sub函数: re.sub(pattern,repl,string,count=0,flags=0) pattern:表示需要匹配的模式,即需要被替换的字符或字符串。 repl:表示替换后的字符串或函数,用于…...

【SQL】在SQL中,行转列

在SQL中&#xff0c;行转列通常是指将数据从水平方向&#xff08;行&#xff09;转换为垂直方向&#xff08;列&#xff09;&#xff0c;这可以通过使用CASE语句或数据库特有的函数如PIVOT&#xff08;在SQL Server中&#xff09;来实现。下面我将通过一个具体的例子来说明如何…...

95. UE5 GAS RPG 实现创建多段飞弹攻击敌人

从这篇开始&#xff0c;我们将实现一些技能&#xff0c;比如多段火球术&#xff0c;闪电链等等。 在这一篇里&#xff0c;我们先实现多段火球术&#xff0c;技能可以通过配置发射出多个火球术进行攻击。 创建多段火球函数 首先在我们之前创建的RPGFireBolt.h类里面增加一个生…...

分布式集群下如何做到唯一序列号

优质博文&#xff1a;IT-BLOG-CN 分布式架构下&#xff0c;生成唯一序列号是设计系统常常会遇到的一个问题。例如&#xff0c;数据库使用分库分表的时候&#xff0c;当分成若干个sharding表后&#xff0c;如何能够快速拿到一个唯一序列号&#xff0c;是经常遇到的问题。实现思…...

在 Vue 2 中使用 Axios 发起 POST 和 GET 请求

Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于浏览器和 node.js&#xff0c;它提供了一种非常方便的方式来发送异步 HTTP 请求。在 Vue 2 应用中&#xff0c;Axios 可以帮助我们轻松地与后端 API 进行通信。本文将介绍如何在 Vue 2 项目中引入 Axios&#xff0c;并…...

Linux内核初始化过程中加载TCP/IP协议栈

Linux内核初始化过程中加载TCP/IP协议栈 Linux内核初始化过程中加载TCP/IP协议栈&#xff0c;从start_kernel、kernel_init、do_initcalls、inet_init&#xff0c;找出Linux内核初始化TCP/IP的入口位置&#xff0c;即为inet_init函数。 Linux内核启动过程 之前的实验中我们设…...

Mysql树形结构表-查询所有子集数据

表结构&#xff0c;这里只是个例子&#xff0c;所有的树形结构表均可用&#xff1a; CREATE TABLE zhkt_course_chapter (id bigint NOT NULL COMMENT 唯一id,course_id bigint NOT NULL COMMENT 所属课程id,name varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general…...

Vue 3 Composition API进阶指南

在上一篇文章中&#xff0c;我们介绍了Vue 3的Composition API基础&#xff0c;包括如何使用setup函数、ref和reactive来创建响应式数据&#xff0c;以及使用watchEffect来监控数据变化。本文将继续深入探讨Composition API的高级用法&#xff0c;帮助你更好地理解和利用Vue 3的…...

C++学习,多继承

多继承&#xff0c;一个子类可以有多个父类&#xff0c;它继承了多个父类的特性。这种机制提供了强大的灵活性&#xff0c;但也带来了复杂性&#xff0c;特别是当涉及到基类中的同名成员&#xff08;包括成员函数和变量&#xff09;时。 C 类从多个类继承成员&#xff0c;语法如…...

苹果研究人员提出了一种新颖的AI算法来优化字节级表示以自动语音识别(ASR),并将其与UTF-8表示进行比较

端到端&#xff08;E2E&#xff09;神经网络已成为多语言自动语音识别&#xff08;ASR&#xff09;的灵活且准确的模型。然而&#xff0c;随着支持的语言数量增加&#xff0c;尤其是像中文、日语、韩语&#xff08;CJK&#xff09;这样大字符集的语言&#xff0c;输出层的大小显…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

【记录坑点问题】IDEA运行:maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

PostgreSQL 与 SQL 基础:为 Fast API 打下数据基础

在构建任何动态、数据驱动的Web API时&#xff0c;一个稳定高效的数据存储方案是不可或缺的。对于使用Python FastAPI的开发者来说&#xff0c;深入理解关系型数据库的工作原理、掌握SQL这门与数据库“对话”的语言&#xff0c;以及学会如何在Python中操作数据库&#xff0c;是…...