H5ke11--3介绍本地,会话存储

代码顺序:

1.设置input,捕获input如果有多个用属性选择符例如

input[type=file]点击事件.向我们的本地存储设置键值对

2.在点击事件外面设置本地存储表示初始化的值.点击上面的事件才能修改我们想修改的值


 会话(session)浏览a数据可以写到本地硬盘,关闭页面数据就没了

本地(localStorage):以前是a打开的,有数据.放在本地.以后打开b页面还可以有相同数据

除非清空缓存

大家一定要注意要清楚缓存在这里

清除之后就是

因为我减少了设置属性

现在

现在我不设置了想变空,变不会去啦,已经存在啦

只能修改

修改后

或者全部清空

localStorage.clear()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="修改">

<script>
    let btn=document.querySelector("input")
            btn.addEventListener("click",(event)=>{
            localStorage.setItem("name","Bobxiugai")
            localStorage.setItem("age","00")
            localStorage.setItem("tall","000")
   })
    console.log(localStorage.length);
    localStorage.setItem("name","Alice");
    // localStorage.setItem("age",20);
    // localStorage.setItem("tall","165.2");

  
    console.log(localStorage.length);

    console.log(localStorage.getItem("name"));
    console.log(localStorage.getItem("age"));
    console.log(localStorage.getItem("tall"));
</script>
</body>
</html>

宏观

 参考:本地存储三种方式得区别_本地存储的区别-CSDN博客

 indexedDB几乎就是一个完善的数据库系统,复杂


笔记

localStorage是Map,

方法

setItem(key,value)

getItem(key)得到

.key方法可以得到键

storage里面的值只能是字符串类型

java值可以任意类型

has方法

这节课,我们要用setItem保存

getitm写上去

key获取键

clear清除全部

Removeitem(key)

length

localStorage没有java的contain,我们用geitem


会引发的事件

加载器吧浏览器加载完了会引发load事件,准备关闭之前beforeunload….我们只要在这之前填充上去就行了 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/160416.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【docker】Docker网络与iptables

Docker能为我们提供很强大和灵活的网络能力&#xff0c;很大程度上要归功于与iptables的结合。在使用时&#xff0c;你可能没有太关注到 iptables在其中产生的作用&#xff0c;这是因为Docker已经帮我们自动的完成了相关的配置。 iptables在Docker中的应用主要是用于网络流量控…

数据结构与算法面试题——C++

自己在秋招过程中遇到的数据结构与算法方面的面试题 数据结构 vector vector是⼀种序列式容器&#xff0c;与array唯⼀差别就是对于空间运⽤的灵活性 array占⽤的是静态空间&#xff0c;⼀旦配置了就不可以改变⼤⼩&#xff0c;如果遇到空间不⾜的情况还要⾃⾏创建更⼤的空间…

AlphaControls控件TsDBCombobox出错:访问违规

日常使用AlphaControls控件TsDBCombobox&#xff0c;作为数据变化数据的控件。通常正常使用&#xff0c;一日 发现&#xff0c;出现以下错误&#xff1a; 控件访问违规的源代码&#xff0c;出错代码&#xff1a; function TacMainWnd.CallPrevWndProc(const Handle: hwnd; co…

UnoCss(原子化css引擎) 让你的开发更轻松愉快

什么是原子化CSS&#xff0c;UnoCSS又是什么&#xff0c;对此有疑问的推荐看下antfu的这篇文章——重新构想原子化 CSS (antfu.me) 相信看完这篇文章的你也会跟我一样热衷于UnoCSS. 介绍 今天介绍一个CSS开发利器 UnoCSS , 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎…

若依启动步骤

1.创建数据库 2.启动redis 3.改后端的数据库连接配置 4.配置redis redis的地址&#xff1a;cmd中ipconfig命令查看 6.启动后端&#xff1a;如下 7.启动前端ruoyi-ui中 先运行npm install&#xff0c;再npm run dev。项目就启动成功了。 用户名&#xff1a;admin 密码&#x…

二十九、W5100S/W5500+RP2040树莓派Pico<Web socket Server>

文章目录 1 前言2 简介2 .1 什么是WebSocket协议&#xff1f;2.2 WebSocket协议工作原理2.3 WebSocket协议优点2.4 WebSocket应用场景 3 WIZnet以太网芯片4 WebSocket示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 结果演示 5 注意事项6 相关链接…

Leetcode 剑指 Offer II 053. 二叉搜索树中的中序后继

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定一棵二叉搜索树和其中的一个节点 p &#xff0c;找到该节点在…

【精选】HTML5最全知识点集合

HTML5简介与基础骨架 HTML5介绍 HTML5是用来描述网页的一种语言&#xff0c;被称为超文本标记语言。用HTML5编写的文件&#xff0c;后缀以.html结尾 HTML是一种标记语言&#xff0c;标记语言是一套标记标签。标签是由尖括号包围的关键字&#xff0c;例如&#xff1a;<html…

基于单片机智能液位水位监测控制系统设计

**单片机设计介绍&#xff0c; 基于单片机智能液位水位监测控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能液位水位监测控制系统可以用来检测和控制液位的高低&#xff0c;并可以用于水泵的控制和自…

戴姆勒——从豪华私家车到无人驾驶飞机

戴姆勒(DaimlerAG)是梅赛德斯-奔驰和精灵(Smart)汽车的德国母公司。自1926年其前身公司合并为戴姆勒-奔驰公司以来&#xff0c;戴姆勒在生产豪华和消费型汽车、卡车和公共汽车方面有着悠久的历史。 如今&#xff0c;除了以其精密设计的汽车闻名外&#xff0c;该公司还在设计、…

⑩④【MySQL】什么是视图?怎么用?视图的检查选项? 视图的作用?[VIEW]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 视图VIEW ⑩④详解MySQL视图1. 视图的基本使用…

NPDP 02组合管理

NPDP 产品经理认证知识体系指南解读&#xff0c;02组合管理 第二章 组合管理 公司战略或经营战略以及创新战略&#xff0c;为竞争性创新投资之间的权衡决策提供了整体方向和框架。在发展和持续性维护一个组织的产品组合时&#xff0c;总要面对一系列彼此竞争资源和投资的项目。…

11.5MyBatis(进阶)

一.${}和#{} 1.$是直接替换,#是预处理(使用占位符,替换成?).前者不安全(SQL注入), 后者安全. 2.$的使用场景: 如果传递的值是sql的关键字,只能使用$,不能使用#(asc,desc). 二.SQL注入 注意: 如果使用${}进行传参,一定要是可以穷举的,并且要进行安全性验证(例如排序,只能传a…

【漏洞复现】​金和OA存在任意文件读取漏洞

漏洞描述 金和OA协同办公管理系统C6软件(简称金和OA),本着简单、适用、高效的原则,贴合企事业单位的实际需求,实行通用化、标准化、智能化、人性化的产品设计,充分体现企事业单位规范管理、提高办公效率的核心思想,为用户提供一整套标准的办公自动化解决方案,以帮助企…

Flume学习笔记(3)—— Flume 自定义组件

前置知识&#xff1a; Flume学习笔记&#xff08;1&#xff09;—— Flume入门-CSDN博客 Flume学习笔记&#xff08;2&#xff09;—— Flume进阶-CSDN博客 Flume 自定义组件 自定义 Interceptor 需求分析&#xff1a;使用 Flume 采集服务器本地日志&#xff0c;需要按照日志…

浅析AcrelEMS-CIA机场智慧能源管平台解决方案-安科瑞 蒋静

1 概述 机场智慧能源管平台解决方案对机场范围内变电站内的高低压配电设备 、 发电机、变压器 、UPS、EPS 、广场照明 、 室内照明 、通风及排水等机电设备进行实时分布式监控和集中管理 , 实现无人值守 , 确保高速公路安全畅通 , 提高 自动化管理水平 , 降低机电设备的运行维…

计算机视觉:驾驶员疲劳检测

目录 前言 关键点讲解 代码详解 结果展示 改进方向&#xff08;打哈欠检测疲劳方法&#xff09; 改进方向&#xff08;点头检测疲劳&#xff09; GUI界面设计展示 前言 上次博客我们讲到了如何定位人脸&#xff0c;并且在人脸上进行关键点定位。其中包括5点定位和68点定…

骨传导能保护听力吗?骨传导耳机是智商税吗?

先说答案&#xff0c;骨传导耳机是可以保护听力的&#xff01;并且骨传导耳机也不是智商税&#xff01;甚至在某些场景下&#xff0c;骨传导耳机比其他耳机更适合。 为什么说骨传导耳机会保护听力呢&#xff1f;因为骨传导耳机跟入耳式耳机的传递声音方式是不一样的&#xff0c…

PACS医学影像信息化数字平台源码

PACS系统对医院影像科意义重大&#xff0c;将业务量巨大的影像检验流程依托于信息化技术&#xff0c;对于进行信息化建设的医院而言&#xff0c;是十分必要的。 PACS系统源码&#xff0c;集成三维影像后处理功能&#xff0c;包括三维多平面重建、三维容积重建、三维表面重建、三…

【HarmonyOS开发】设备调试避坑指南

备注&#xff1a;通过开发验证&#xff0c;发现每个设备调试都会存在不小的差别&#xff0c;开发验证需要注意~ 1、预览器调试&#xff08;只能预览具有Entry修饰的文件&#xff09; 修改文件&#xff0c;预览器将自动刷新 注意&#xff1a;当我们只修改了Component 组件的文件…