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

Web存储

news 2026/2/8 22:15:41

目录

什么是 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)]&#xff0c;这是C#引用非托管的C/C的DLL的一种定义定义结构体的方式&#xff0c;主要是为了内存中排序&#xff0c;LayoutKind有两个属性Sequential和Explicit&a…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kubernetes的ExternalName详解

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

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

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

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

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

README

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

编程日记 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下载地址 &#xff1a; Index of /archive/qt 所有Qt Creator下载地址&#xff1a; Index of /archive/qtcreator 所有Qt VS开发插件下载地址: Index of /archive/vsaddin 4.Qt官网镜像下载地址&#xff1a; Index of /…...

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

C++包含整数各位重组

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）

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

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

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

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

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

【MySQL基础】事务隔离03

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

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

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

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

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

【MySQL】初见数据库

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

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

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

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

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

HTTP协议都有哪些方法？

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

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/9/19 11:48:17