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

JS 本地存储 sessionStorage localStorage

news 2026/5/24 22:59:34

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify)编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3．以键值对的形式存储使用

存储数据∶

        sessionStorage.setltem(key, value)

获取数据∶

        sessionStorage.getltem(key)

删除数据︰

        sessionStorage.removeltem(key)

删除所有数据︰

        sessionStorage.clear()

代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>console.log(localStorage.getItem('username'));var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {// 当我们点击了之后，就可以把表单里面的值存储起来var val = ipt.value;sessionStorage.setItem('uname', val);sessionStorage.setItem('pwd', val);});get.addEventListener('click', function() {// 当我们点击了之后，就可以把表单里面的值获取过来console.log(sessionStorage.getItem('uname'));});remove.addEventListener('click', function() {// sessionStorage.removeItem('uname');});del.addEventListener('click', function() {// 当我们点击了之后，清除所有的sessionStorage.clear();});</script>
</body></html>

在网页中按F12

Application中Session Storage中可以查看到存储的数据

window.localStorage

1、生命周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口(页面)共享(同一浏览器可以共享)

3．以键值对的形式存储使用

存储数据∶

sessionStorage.setltem(key, value)

获取数据∶

sessionStorage.getltem(key)

删除数据︰

sessionStorage.removeltem(key)

删除所有数据︰

sessionStorage.clear()

代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {var val = ipt.value;localStorage.setItem('username', val);})get.addEventListener('click', function() {console.log(localStorage.getItem('username'));})remove.addEventListener('click', function() {localStorage.removeItem('username');})del.addEventListener('click', function() {localStorage.clear();})</script>
</body></html>

在网页中按F12

Application中Local Storage中可以查看到存储的数据

相关文章：

JS 本地存储 sessionStorage localStorage

本地存储 随着互联网的快速发展&#xff0c;基于网页的应用越来越普遍&#xff0c;同时也变的越来越复杂&#xff0c;为了满足各种各样的需求&#xff0c;会经常性在本地存储大量的数据&#xff0c;HTML5规范提出了相关解决方案。 本地存储特性 1、数据存储在用户浏览器中 2…...

编程日记 2024/1/16 11:04:40

K8S 存储卷

意义&#xff1a;存储卷----数据卷 容器内的目录和宿主机的目录进行挂载 容器在系统上的生命周期是短暂的&#xff0c;delete,k8s用控制器创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会回复到初始状态 一旦回到初始状态&#xff0c;所有的后天编辑的文件…...

编程日记 2024/1/16 10:59:34

一个SqlSugar实际案例

SqlGugar是一个非常好的数据库操作框架&#xff0c;今天用一个示例来分享如何使用。 新建一张课程表 结构如下&#xff1a; CREATE TABLE t_course (id int NOT NULL AUTO_INCREMENT COMMENT ID,title varchar(1024) NOT NULL COMMENT 课程标题,description text NOT NULL C…...

编程日记 2024/1/16 10:58:33

【RT-DETR有效改进】ShapeIoU、InnerShapeIoU关注边界框本身的IoU(包含二次创新)

前言 大家好&#xff0c;我是Snu77&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持Re…...

编程日记 2024/1/16 10:57:32

从理论到实践：数字孪生技术的全面应用探讨

数字孪生是一种将实际物体或系统的数字模型与其实时运行状态相结合的概念。这一概念的核心在于创建一个虚拟的、与真实世界相对应的数字副本&#xff0c;以便监测、分析和优化实体系统的性能。 简单理解&#xff0c;数字孪生就是在一个设备或系统的基础上&#xff0c;创造一个…...

编程日记 2024/1/16 10:56:31

2.1.2 一个关于y=ax+b的故事

跳转到根目录&#xff1a;知行合一&#xff1a;投资篇 已完成&#xff1a; 1、投资&技术   1.1.1 投资-编程基础-numpy   1.1.2 投资-编程基础-pandas   1.2 金融数据处理   1.3 金融数据可视化 2、投资方法论   2.1.1 预期年化收益率   2.1.2 一个关于yaxb的…...

编程日记 2024/1/16 10:55:30

Rust-解引用

“解引用”(Deref)是“取引用”(Ref)的反操作。取引用&#xff0c;我们有&、&mut等操作符&#xff0c;对应的&#xff0c;解引用&#xff0c;我们有操作符&#xff0c;跟C语言是一样的。示例如下&#xff1a; 比如说&#xff0c;我们有引用类型p:&i32;,那么可以用符…...

编程日记 2024/1/16 10:54:29

记录一下vue项目引入百度地图

公共部分 #allmap { width: 500px; height: 500px; font-family: "微软雅黑"; } 1、 <div id"allmap"> <baidu-map :center"center" :zoom"zoom" ready"handler"></baidu-map> </div> data()…...

编程日记 2024/1/16 10:52:26

基于Docker官方php:7.4.33-fpm镜像构建支持67个常见模组的php7.4.33镜像

实践说明&#xff1a;基于RHEL7(CentOS7.9)部署docker环境(23.0.1、24.0.2)&#xff0c;所构建的php7.4.33镜像应用于RHEL7-9(如AlmaLinux9.1)&#xff0c;但因为docker的特性&#xff0c;适用场景是不限于此的。 文档形成时期&#xff1a;2017-2023年 因系统或软件版本不同&am…...

编程日记 2024/1/16 10:51:25

opencv通过轮廓点生成闭合图像

前言 有时候需要将某一些点生成闭合的二值图像。记录一下。 // 轮廓点个数 int nrCurvePoints curContour.nr; // 轮廓点 DIM2DL* curvePoints curContour.pts;std::vector<cv::Point> points; // 轮廓点集合 for (int cntPoint 0; cntPoint < nrCurvePoints; cn…...

编程日记 2024/1/16 10:50:24

Python 网络编程之TCP详细讲解

【一】传输层 【1】概念 传输层是OSI五层模型中的第四层&#xff0c;负责在网络中的两个端系统之间提供数据传输服务主要协议包括**TCP&#xff08;传输控制协议&#xff09;和UDP&#xff08;用户数据报协议&#xff09;** 【2】功能 **端到端通信&#xff1a;**传输层负责…...

编程日记 2024/1/16 10:49:23

直饮水系统服务认证：提升水质与安全的必要举

直饮水系统作为一种便捷、卫生的饮水方式&#xff0c;已经越来越受到人们的欢迎。然而&#xff0c;随着市场的发展&#xff0c;直饮水系统的质量和服务也面临着一些挑战。因此&#xff0c;直饮水系统服务认证应运而生&#xff0c;成为了提升水质与安全的必要举措。 一、直饮水…...

编程日记 2024/1/16 10:46:20

Qt 调试系统输出报警声以及添加资源

文章目录 前言一、方法1 使用 Qsound1.添加都文件 直接报错2.解决这个错误 添加 QT multimedia3. 加入代码又遇到新的错误小结 二、第二种方法1.引入库2.添加资源2.1依次点击Qt--->Qt Resource File--->Choose2.2给资源文件起个名字&#xff0c;如&#xff1a;res&#…...

编程日记 2024/1/16 10:43:17

Linux下文件的创建写入读取编程

在linux下操作一个文件&#xff0c;首先要保证文件的存在&#xff08;不存在就创建&#xff09;&#xff0c;接着打开文件&#xff08;打开成功&#xff09;并得到文件描述符&#xff0c;接着在进行读写操作&#xff0c;最后还需要关闭文件。如果我们对文件进行读写之后不关闭文…...

编程日记 2024/1/16 10:42:16

python 解析

list(pd.DataFrame) # 所有列名切片&#xff1a;print("显式 切片:\n", df.loc[:, "number":"sum"]) 所有行&#xff0c;列是从number 到sum &#xff0c;前闭后开print("隐式 切片:\n", df.iloc[:, 1:3]) # 结果和上面一样转化成字典…...

编程日记 2024/1/16 10:40:13

谷歌aab包在Android 14闪退而apk没问题(targetsdk 34)

问题原因 Unity应用(target SDK 34)上线到GooglePlay&#xff0c;有用户反馈fold5设备上&#xff08;Android14系统&#xff09;疯狂闪退&#xff0c;经测试&#xff0c;在小米手机Android14系统的版本复现成功了&#xff0c;奇怪的是apk直接安装没问题&#xff0c;而打包成aa…...

编程日记 2024/1/16 10:37:09

34.在排序数组中查找元素的第一个和最后一个位置

34.在排序数组中查找元素的第一个和最后一个位置 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为…...

编程日记 2024/1/16 10:36:08

js树过滤

// 递归过滤得到每一项的hidden为false的数据 function filterTree(arr) { return arr.filter(item > { if (item.children) { item.children filterTree(item.children) } if (!item.hidden) { return true } }) }...

编程日记 2024/1/16 10:33:05

Java多线程并发篇----第十六篇

系列文章目录 文章目录 系列文章目录前言一、线程等待（wait）二、线程睡眠（sleep）三、线程让步（yield）四、线程中断（interrupt）五、Join 等待其他线程终止前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这…...

编程日记 2024/1/16 10:31:03

测评结果：免费的“文心一言3.5”香，但是付费的产品质量更高

文章目录 前言一、文心一言3.5生成的图片和文章1.文心一言生成的图片在文心一言3.5中输入以下内容&#xff1a;我的测评结果&#xff1a; 2.文心一言生成的文章在文心一言3.5中输入以下内容&#xff1a;我的测评结果&#xff1a; 二、ChatGPT生成的图片和文章1.ChatGPT4.0 生成…...

编程日记 2024/1/16 10:30:02

MySQL 全文索引实战：搜索功能的正确打开方式

开场白 做搜索功能的时候&#xff0c;很多人第一反应是 LIKE ‘%关键词%’&#xff0c;数据量小的时候没问题&#xff0c;数据一大直接全表扫描。我之前有个项目&#xff0c;商品表的 LIKE 搜索在 50 万条数据时就要 3 秒以上&#xff0c;根本没法用。后来上了全文索引&#x…...

编程新知 2026/5/24 22:58:13

LinkSwift网盘直链下载助手：一站式解决9大网盘下载难题

LinkSwift网盘直链下载助手&#xff1a;一站式解决9大网盘下载难题 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼…...

编程新知 2026/5/24 22:56:11

云安全与合规

云安全与合规 1. 技术分析 1.1 云安全概述 云安全是云计算的关键考量&#xff1a; 云安全维度数据安全: 加密、访问控制网络安全: 防火墙、VPN身份管理: IAM、SSO合规性: GDPR、SOC2安全责任:服务商: 基础设施安全用户: 数据和应用安全1.2 云安全架构 安全层次物理层: 数据…...

编程新知 2026/5/24 22:54:02

NISQ时代量子机器学习实战：从变分量子电路到混合架构落地

1. 量子机器学习&#xff1a;从NISQ时代的现实挑战到工程实践如果你关注前沿科技&#xff0c;最近几年一定频繁听到“量子计算”和“机器学习”这两个词。当这两个看似在不同轨道上狂奔的领域开始交汇&#xff0c;就诞生了一个充满想象力又极具挑战的新方向——量子机器学习。我…...

编程新知 2026/5/24 22:51:57

初次使用Taotoken，从注册到发出第一个API请求的全流程耗时记录

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初次使用Taotoken&#xff0c;从注册到发出第一个API请求的全流程耗时记录 1. 场景与目标 本文旨在记录一名新用户从零开始&#…...

编程新知 2026/5/24 19:49:23

Taotoken在多模型API聚合中的稳定性与低延迟体验观测

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken在多模型API聚合中的稳定性与低延迟体验观测 在项目开发中&#xff0c;尤其是那些重度依赖大模型能力的应用&#xff0c;A…...

编程新知 2026/5/24 19:35:11

掌握GWAS数据分析：3个实用技巧连接遗传数据与分析方法

掌握GWAS数据分析&#xff1a;3个实用技巧连接遗传数据与分析方法 【免费下载链接】gwasglue Linking GWAS data to analytical tools in R 项目地址: https://gitcode.com/gh_mirrors/gw/gwasglue 你是否曾经为GWAS数据分析中不同格式和工具的兼容性而烦恼&#xff1f;…...

编程新知 2026/5/24 19:17:03

百度网盘直链解析：5分钟实现全速下载的终极指南

百度网盘直链解析&#xff1a;5分钟实现全速下载的终极指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 还在为百度网盘的非会员限速而烦恼吗&#xff1f;每次下载大文件都…...

编程新知 2026/5/24 18:21:52

多路召回RAG系统

项目采用 多路召回 Rerank的RAG架构&#xff0c;核心入口是 RagSpecialistAgent.java&#xff0c;当用户与问答助手进行语言交流时&#xff0c;输入查询&#xff0c;首先先进行意图识别&#xff0c;判断是单任务还是多任务&#xff0c;并且判断是否需要RAG检索&#xff0c;因为…...

编程新知 2026/5/24 17:08:12

Palworld存档迁移终极解决方案：palworld-host-save-fix完整教程

Palworld存档迁移终极解决方案&#xff1a;palworld-host-save-fix完整教程 【免费下载链接】palworld-host-save-fix Fixes the bug which forces a player to create a new character when they already have a save. Useful for migrating maps from co-op to dedicated ser…...

编程新知 2026/5/24 17:04:03