ke11介绍本地,会话存储

news2024/11/24 10:00:16

代码顺序:

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….我们只要在这之前填充上去就行了 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JPA整合Sqlite解决Dialect报错问题, 最新版Hibernate6

前言 我个人项目中&#xff0c;不想使用太重的数据库&#xff0c;而内嵌数据库中SQLite又是最受欢迎的&#xff0c; 因此决定采用这个数据库。 可是JPA并不支持Sqlite&#xff0c;这篇文章就是记录如何解决这个问题的。 原因 JPA屏蔽了底层的各个数据库差异&#xff0c; 但是…

使用Python的time库来格式化时间

目录 一、引言 二、time库简介 三、使用time库来格式化时间 四、使用time库进行时间戳转换 五、使用time库获取当前时间 六、使用time库进行延时操作 七、使用time库计算时间差 八、使用time库获取系统时间 九、使用time库的其他功能 总结 一、引言 在Python中&…

鸿蒙OS应用开发初体验

什么是HarmonyOS&#xff1f; HarmonyOS&#xff08;鸿蒙操作系统&#xff09;是华为公司开发的一款基于微内核的分布式操作系统。它是一个面向物联网&#xff08;IoT&#xff09;时代的全场景操作系统&#xff0c;旨在为各种类型的设备提供统一的操作系统平台和开发框架。Har…

自媒体剪辑必备,6个音效素材网站,你值得拥有。

这6个剪辑必备的音效素材网站一定要收藏好了&#xff0c;有了这几个网站能让你在剪辑的时候事半功倍&#xff0c;还不用担心版权问题。话不多说&#xff0c;直接上干货。 1、菜鸟图库 https://www.sucai999.com/audio.html?vNTYwNDUx 菜鸟图库是一个综合性素材网站&#xff…

ref属性

Vue 中 可以给标签&#xff08;HTML元素标签、组件标签&#xff09;加上一个 ref 属性&#xff0c;作用就是给 标签加上一个标识&#xff0c;可以通过该标识获取当前需要的DOM元素或者组件实例对象。 通过原生js获取DOM 如果使用原生js来获取DOM元素时&#xff0c;我们最简单的…

Kafka学习笔记(一)

目录 第1章 Kafka概述1.1 消息队列&#xff08;Message Queue&#xff09;1.1.1 传统消息队列的应用场景1.1.2 消息队列的两种模式 1.2 定义 第2章 Kafka快速入门2.1 安装部署2.1.1 集群规划2.1.2 jar包下载2.1.3 集群部署 2.2 Kafka命令行操作 第3章 Kafka架构深入3.1 Kafka工…

23111708[含文档+PPT+源码等]计算机毕业设计基于javaweb的旅游网站前台与后台旅景点

文章目录 **论文截图&#xff1a;****实现&#xff1a;****代码片段&#xff1a;** 编程技术交流、源码分享、模板分享、网课教程 &#x1f427;裙&#xff1a;776871563 下面是系统运行起来后的部分截图&#xff1a; 论文截图&#xff1a; 实现&#xff1a; 代码片段&#xf…

身份证如何加水印?一分钟解决!

身份证是对我们每个人来说都非常重要的东西&#xff0c;在身份证上添加水印&#xff0c;可以明确证件的所有权和合法性&#xff0c;可以在一定程度上防止身份证被用于非法目的&#xff0c;如身份盗用、欺诈等。下面就向大家介绍三种实用的方法和具体操作步骤。 方法一&#xff…

剑指Offer || 116.省份数量

题目 有 n 个城市&#xff0c;其中一些彼此相连&#xff0c;另一些没有相连。如果城市 a 与城市 b 直接相连&#xff0c;且城市 b 与城市 c 直接相连&#xff0c;那么城市 a 与城市 c 间接相连。 省份 是一组直接或间接相连的城市&#xff0c;组内不含其他没有相连的城市。 …

Linux环境下安装部署MySQL8.0以上(内置保姆级教程)- 离线模式

摘要 本文档适用于在无网的情况下手动部署的MySQL。任何版本均可按照如下步骤进行部MySQL。 并且还讲解了如何修改数据库root账号的密码&#xff1b;以及还讲解了如何开启mysql远程访问权限&#xff0c;允许远程连接。 一、安装前准备工作 1.确认目前服务器上是否存在MySQL…

竞赛 题目:基于机器视觉的图像矫正 (以车牌识别为例) - 图像畸变校正

文章目录 0 简介1 思路简介1.1 车牌定位1.2 畸变校正 2 代码实现2.1 车牌定位2.1.1 通过颜色特征选定可疑区域2.1.2 寻找车牌外围轮廓2.1.3 车牌区域定位 2.2 畸变校正2.2.1 畸变后车牌顶点定位2.2.2 校正 7 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享…

《QT从基础到进阶·三十三》QT插件开发QtPlugin

插件和dll区别&#xff1a; 插件 插件主要面向接口编程&#xff0c;无需访问.lib文件&#xff0c;热插拔、利于团队开发。即使在程序运行时.dll不存在&#xff0c;也可以正常启动&#xff0c;只是相应插件功能无法正常使用而已&#xff1b; 调用插件中的方法只要dll即可&#x…

Hadoop学习总结(MapRdeuce的词频统计)

MapRdeuce编程示例——词频统计 一、MapRdeuce的词频统计的过程 二、编程过程 1、Mapper 组件 WordcountMapper.java package com.itcast.mrdemo;import org.apache.hadoop.io.IntWritable; import org.apache.hadoop.io.LongWritable; import org.apache.hadoop.io.Text; …

# Python基础:输入输出详解-读写文件(还需完善)

open() 返回一个 file object &#xff0c;最常使用的是两个位置参数和一个关键字参数&#xff1a;open(filename, mode, encodingNone) f open(workfile, w, encoding"utf-8")第一个实参是文件名字符串。第二个实参是包含描述文件使用方式字符的字符串。mode 的值…

HTML5学习系列之项目实战1

HTML5学习系列之项目实战1 前言代码记录问题总结 前言 学习记录 代码 <div id"player"><audio id"musicbox"></audio><div id"controls" class"clearfix controls"><div id"play" class"…

Ajax 之XMLHttpRequest讲解

一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。 一.什么是Ajax? 答: AJAX即“Asynchronous Javascript And XML”&#xff08;异步JavaScript和XML&#xff09;&#xff0c;是指一种创建交互式网页应用的网页开发技术。 AJAX 异步 JavaScript和XML&#x…

简单解决网页的验证码

翻到一个网站,展开需要验证码,而验证码需要关注微信公众号,懒得弄,所以有了这篇文章 首先,先看一下F12中的网络(Network),发现并没有使用网络动态验证 那么这个验证码必定是写在资源文件中的 在确定按钮上看到如下元素监听(Event Listeners) 进入打断点 成功断下 单步跟到…

代码随想录算法训练营第五十五天丨 动态规划part16

583. 两个字符串的删除操作 思路 #动态规划一 本题和动态规划&#xff1a;115.不同的子序列 (opens new window)相比&#xff0c;其实就是两个字符串都可以删除了&#xff0c;情况虽说复杂一些&#xff0c;但整体思路是不变的。 这次是两个字符串可以相互删了&#xff0c;这…

QTcpSocket发送结构体的做法

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> QTcpSocket发送结构体其实很简单:使用QByteArray类对象进行封装发送&#xff0c;示例代码如下&#xff1a; /* 消息结构体 */ struct stMsg {int m_A…

802.1Qbb

[TOC] 802.1Qbb 802.1Qbb是什么&#xff1f; 802.1Qbb&#xff08;基于优先级的流控制&#xff0c;PFC&#xff09;是以太网数据中心中一项重要的标准&#xff0c;用于提供无丢包的网络环境。这项标准是IEEE 802.1Q标准的一部分&#xff0c;旨在解决以太网数据中心网络中的拥…