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

Web存储

news 2026/5/22 8:13:43

什么是 HTML5 Web 存储?

方法

webStorage

会话存储 sessionStorage

本地存储localStorage

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以键/值对存在, web网页的数据只允许该网页访问使用。

方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.2/js.cookie.js"></script>
</head>
<body><script>console.log(Cookies)// 存数据Cookies.set('no','web201');Cookies.set('name','jamie');</script>
</body>
</html>

这个页面我们先不关闭，再来创建一个html网页，使用cookie存储数据，打开第二个页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.2/js.cookie.js"></script>
</head>
<body><script>console.log(Cookies)// 存数据Cookies.set('gender','male');</script>
</body>
</html>

我们发现cookie中两个网页的存储信息都能得到，可以得出cookie存储的特点为:

产生于服务器，保存在客户端，同一服务器的cookie数据是共享的，数据最大不超过4KB

webStorage

会话存储 sessionStorage

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 存数据 属性名  属性值sessionStorage.setItem('name','larry');sessionStorage.setItem('age',18);// 取数据console.log(sessionStorage.getItem('name'));// 删数据sessionStorage.removeItem('age');// 一次性删除全部会话存储//sessionStorage.clear();</script>
</body>
</html>

我们关闭网页后，将存数据的两行代码注释掉(不注释得话再次打开网页相当于又存数据)，再次打开网页，可以发现数据已经没了

会话存储的特点为:针对于选项卡和浏览器，当选项卡和浏览器关闭时，会话就失效，数据可以达到5-10MB

本地存储localStorage

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 本地存储localStorage.setItem('name','jamie');localStorage.setItem('age','20');// vuex 如何进行持久化存储 永久化存储console.log(localStorage.getItem('name'));localStorage.removeItem('age')// 删除全部// localStorage.clear()</script>
</body>
</html>

我们关闭网页后，将存数据的两行代码注释掉(理由同上)，再次打开网页，发现数据还是存在。

本地存储的特点为:将数据存储到本地，即使关闭浏览器和选项卡数据依然存在，除非手动删除，数据可以达到5-10MB

Web存储

目录什么是 HTML5 Web 存储? 方法 cookie webStorage 会话存储 sessionStorage 本地存储localStorage 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服…...

编程日记 2023/9/8 17:41:29

字节对齐（C++，C#）

C#字节对齐示例结构体定义 [StructLayoutAttribute(LayoutKind.Sequential, CharSet CharSet.Ansi, Pack 1)]，这是C#引用非托管的C/C的DLL的一种定义定义结构体的方式，主要是为了内存中排序，LayoutKind有两个属性Sequential和Explicit&a…...

编程日记 2023/9/8 17:40:28

使用mybatisplus查询sql时，报Error attempting to get column ‘ID‘ from result set错误

问题描述： 在使用如下代码进行查询时，报Error attempting to get column ‘ID’ from result set错误： LambdaQueryWrapper<TimeFeature> wrapper new LambdaQueryWrapper<>();wrapper.eq(TimeFeature::getDate, currentDateTim…...

编程日记 2023/9/8 17:39:27

ElementUI浅尝辄止32：NavMenu 导航菜单

为网站提供导航功能的菜单。常用于网站平台顶部或侧边栏菜单导航。 1.如何使用？顶栏 /*导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、…...

编程日记 2023/9/8 17:38:25

@Value的注入与静态注入与组件中静态工具类的注入

一、Value 的注入首先时一般的注入，例如你的配置文件中： vod: access-key: 123456那么，你就可以在你的方法中进行注入： Component public class VodService{Value("${vod.access-key}")private String accessKey; }…...

编程日记 2023/9/8 17:37:24

Qt--自定义搜索控件，QLineEdit带前缀图标

写在前面这里自定义一个搜索控件，通过自定义LineEdit的textChange信号，搜索指定内容，并以QCheckBox的方式显示在QListWidget中。开发版本 Qt: 5.15.2 Qt: Creator10.0.2 编译环境：msvc2019_64bit release 效果代码自定义…...

编程日记 2023/9/8 17:36:23

8月AI实战：工业视觉缺陷检测

8月AI实战：工业视觉缺陷检测 –基于tflite的yolov8模型优化和推理操作视频见B站连接：aidlux模型优化工业缺陷检测～～完美用我的华为手机实现缺陷检测的推理bilibiliaidlux模型优化工业缺陷检测～～完美用我…...

编程日记 2023/9/8 17:35:21

Kubernetes的ExternalName详解

ExternalName类型的Service在Kubernetes中用于将外部服务（不是Kubernetes集群内的服务）映射到Kubernetes集群内的Service。样例其创建方法如下： kind: Service apiVersion: v1 metadata:name: my-external-servicenamespace: cv-console…...

编程日记 2023/9/8 17:34:20

使用 Pandera 的 PySpark 应用程序的数据验证

推荐：使用 NSDT场景编辑器快速搭建3D应用场景本文简要介绍了 Pandera 的主要功能，然后继续解释 Pandera 数据验证如何与自最新版本 （Pandera 0.16.0） 以来使用本机 PySpark SQL 的数据处理工作流集成。 Pandera 旨在与其他流行…...

编程日记 2023/9/8 17:33:19

README

一、Markdown 简介 Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。应用当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、知乎等编辑器推荐使用Typora，官…...

编程日记 2023/9/8 17:32:18

Excel周报制作

Excel周报制作文章目录 Excel周报制作一、理解数据二、数据透视表三、常用函数1.sum-求和2.sumif-单条件求和3.sumifs-多条件求和4.sum和subtotal的区别5.if函数6.if嵌套7.vlookup函数和数据透视表聚合8.index和match函数四、周报开发五、报表总览一、理解数据这是一个线上…...

编程日记 2023/9/8 17:31:17

Qt QtCreator 所有官方下载地址

Qt QtCreator 所有版本官方下载地址 1.所有版本QT下载地址 ： Index of /archive/qt 所有Qt Creator下载地址： Index of /archive/qtcreator 所有Qt VS开发插件下载地址: Index of /archive/vsaddin 4.Qt官网镜像下载地址： Index of /…...

编程日记 2023/9/8 17:30:14

void 包含整数各位重组() {//缘由https://bbs.csdn.net/topics/395402016int shu 100000, bs 4, bi shu * bs, a 0, p 0, d 0;while (shu < 500000)if (a<6 && (p to_string(shu).find(to_string(bi)[a], p)) ! string::npos && (d to_string(bi…...

编程日记 2023/9/8 17:29:14

数学建模--模型总结（5）

优化问题： 线性规划，半定规划、几何规划、非线性规划，整数规划，多目标规划（分层序列法），最优控制（结合微分方程组）、变分法、动态规划，存贮论、代理模型、响…...

编程日记 2023/9/8 17:28:12

JavaScript 中的原型到底该如何理解？

JavaScript作为一个基于原型的OOP，和我们熟知的基于类的面向对象编程语言有很大的差异。如果不理解其中的本质含义，则无法深入理解JavaScript的诸多特性，以及由此产生的诸多“坑”。在讨论“原型”的概念之前，我们先来讨论一下“类…...

编程日记 2023/9/8 17:27:10

【MySQL基础】事务隔离03

目录隔离性与隔离级别事务隔离的实现事务的启动方式MySQL事务代码示例在MySQL中，事务支持是在引擎层实现的。MySQL是一个支持多引擎的系统，但并不是所有的引擎都支持事务。比如 MySQL 原生的 MyISAM 引擎就不支持事务，这也是 MyISAM 被 Inn…...

编程日记 2023/9/8 17:26:08

2023高教社杯数学建模C题思路分析 - 蔬菜类商品的自动定价与补货决策

# 1 赛题在生鲜商超中，一般蔬菜类商品的保鲜期都比较短，且品相随销售时间的增加而变差， 大部分品种如当日未售出，隔日就无法再售。因此， 商超通常会根据各商品的历史销售和需求情况每天进行补货。由于商超销售的蔬菜…...

编程日记 2023/9/8 17:25:07

【MySQL】初见数据库

目录什么是MySQL 为什么要使用数据库数据库基础数据库的本质存储引擎常用操作登录mysql 创建数据库使用数据库查看数据库创建数据库表查看表向表中插入数据查询表中数据什么是MySQL 🍒在我们服务器安装完 MySQL 服务之后，经…...

编程日记 2023/9/8 17:24:06

选择合适的帧率和分辨率：优化RTSP流视频抓取（java）

引言在实时视频流应用中，选择适当的帧率和分辨率对于确保视频流的顺畅播放和图像质量至关重要。本文将向您介绍如何使用Java和JavaCV库中的FFmpegFrameGrabber来从RTSP流中抓取图像，并在抓取时设置帧率和分辨率。一、配置开发环境首先，…...

编程日记 2023/9/8 17:23:05

HTTP协议都有哪些方法？

分析&回答 HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法描述HEAD请求资源的头部信息, 并且这些头部与 HTTP GET 方法请求时返回的一致. 该请求方法的一个使用场景是在…...

编程日记 2023/9/8 17:22:04

工业自动化设备电流检测解决方案——工业控制系统为什么越来越重视隔离电流检测

在工业自动化设备中，电流检测已经成为控制系统的重要组成部分。无论是PLC控制柜、伺服驱动器、工业电源、机器人控制系统还是变频器系统，控制器都需要实时获取负载电流信息，用于过流保护、闭环控制、功率计算以及设备状态监测。但很多工程师在…...

编程新知 2026/5/22 7:45:06

Android Method Tracing深度解析：Unity性能瓶颈跨层归因实战

1. 为什么Method Tracing不是“点一下就出报告”的银弹，而是Android性能诊断的听诊器在Unity项目上线前的最后两周，我接手了一个卡顿严重的AR应用——启动后3秒内帧率从60掉到22，用户滑动模型时UI直接冻结。团队里有人立刻打开Profiler&#…...

编程新知 2026/5/22 7:28:43

从芯片到产品：嵌入式AI与安全设计实战解析

1. 项目概述：一次面向未来的技术对话最近，我作为启扬智能的一员，有幸参与了「2025恩智浦技术巡回研讨会」的线下活动。这不仅仅是一次简单的产品展示或技术宣讲，更像是一场与产业链上下游伙伴、众多开发者同行进行的深度技术对话。…...

编程新知 2026/5/22 7:24:35

从RSSI走向信道探测，蓝牙设备的“距离感知”能力已至“厘米级”

长期以来，物联网（IoT）无线连接技术的发展重心主要聚焦于通信性能、通信功耗与组网效率等方面；然而，随着智能家居、数字车钥匙、工业自动化、智慧门禁、资产管理以及地理围栏等应用的快速扩张，行业正在提出一…...

编程新知 2026/5/22 6:50:04

Go语言事件溯源：Event Sourcing

Go语言事件溯源：Event Sourcing 1. 事件溯源 type Event interface {EventType() string }type AccountCreated struct {AccountID stringOwner string }func (e *AccountCreated) EventType() string {return "AccountCreated" }2. 总结事件溯源通过…...

编程新知 2026/5/22 5:19:20