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

news2025/1/17 17:53:58

代码顺序:

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/1225086.html

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

相关文章

2023年【P气瓶充装】报名考试及P气瓶充装复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年P气瓶充装报名考试为正在备考P气瓶充装操作证的学员准备的理论考试专题&#xff0c;每个月更新的P气瓶充装复审考试祝您顺利通过P气瓶充装考试。 1、【多选题】充装过程中出现充气头漏气的主要原因为&#xff1…

Java Web——JavaScript运算符与流程语句

1. 运算符 1.1. 算数运算符 数字是用来计算的&#xff0c;比如&#xff1a;乘法 * 、除法 / 、加法 、减法 - 等等&#xff0c;所以经常和算术运算符一起。 算术运算符&#xff1a;也叫数学运算符&#xff0c;主要包括加、减、乘、除、取余&#xff08;求模&#xff09;等 …

git拉取普通idea Java项目module没有build的问题

在不断完成一个项目的时候&#xff0c;会有不断新加的module&#xff0c;我们用git拉取时会发生没有识别新module的情况。 解决方法是右键项目名称&#xff0c;然后点击Open Module Settings 接下来&#xff0c;点击Module&#xff0c;加号&#xff0c;新建Module的名字就是在g…

高效文件管理:一键批量修改文件名,并统一转换为大写扩展名

在日常生活和工作中&#xff0c;文件处理成为了一项必不可少的任务。无论是个人还是企业&#xff0c;都需要管理大量的文件&#xff0c;包括图片、文档、音频和视频等。这些文件的名字可能千奇百怪&#xff0c;格式各不相同&#xff0c;而且往往需要按照一定的规则进行修改或整…

MFC 对话框

目录 一、对话款基本认识 二、对话框项目创建 三、控件操作 四、对话框创建和显示 模态对话框 非模态对话框 五、动态创建按钮 六、访问控件 控件添加控制变量 访问对话框 操作对话框 SendMessage() 七、对话框伸缩功能实现 八、对话框小项目-逃跑按钮 九、小项…

十一、统一网关GateWay(搭建网关、过滤器、跨越解决)

目录 一、网关技术的实现 在SpringCloud中网关的实现包括两种: 作用&#xff1a; 二、搭建网关服务 1、新建模块&#xff0c;并添加依赖 2、新建Gateway包&#xff0c;并编写启动类 3、编写yml文件 4、启动服务&#xff0c;并在网页内测试 5、步骤 三、路由断言工厂 …

Vue3 shallowRef 和 shallowReactive

一、shallowRef 使用shallowRef之前需要进行引入&#xff1a; import { shallowRef } from vue; 使用方法和ref 的使用方法一致&#xff0c;以下是二者的区别&#xff1a; 1. 如果ref 和 shallowRef 都传入的是普通数据类型的数据&#xff0c;那么他们的效果是一样的&#x…

OpenGL 的学习之路-4(变换)

三大变换&#xff1a;平移、缩放、旋转&#xff08;通过这三种变换&#xff0c;可以将图像移动到任意位置&#xff09; 其实&#xff0c;这背后对应的数学在 闫令琪 图形学课程 中有过一些了解&#xff0c;所以&#xff0c;理解起来也不觉得很困难。看程序吧。 1.画三角形&am…

【C++】类和对象(6)--运算符重载

目录 一 概念 二 运算符重载的实现 三 关于时间的所有运算符重载 四 默认赋值运算符 五 const取地址操作符重载 一 概念 C为了增强代码的可读性引入了运算符重载&#xff0c;运算符重载是具有特殊函数名的函数&#xff0c;也具有其返回值类型&#xff0c;函数名字以及参数…

【使用vscode在线web搭建开发环境--code-server搭建】

官方版本下载 https://github.com/coder/code-server/releases?q4.0.0&expandedtrue使用大于版本3.8.0,因为旧版本有插件市场不能访问的情况版本太高需要更新环境依赖 拉取安装包 []# wget "https://github.com/coder/code-server/releases/download/v4.0.0/code-…

[游戏开发][Untiy]跨平台可视化Log系统

工具介绍 今天介绍的主角是LogViewer 工具运行时长这个样子&#xff0c;Unity的Log日志都会在这里显示 如何安装 在Unity商店搜索Log&#xff0c;排名第一的就是它 也可以去Github官网下载源码&#xff1a; Unity-Logs-Viewerhttps://github.com/aliessmael/Unity-Logs-Vie…

机器学习的医疗乳腺癌数据的乳腺癌疾病预测

项目视频讲解:基于机器学习的医疗乳腺癌数据的乳腺癌疾病预测 完整代码数据分享_哔哩哔哩_bilibili 效果演示: 代码: #第一步!导入我们需要的工具 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns %matplotlib inlin…

Python的数据分析包Pandas?示例文章完成版来啦~

文章目录 前言一、Pandas简介二、Python Pandas的使用 总结 前言 pandas 是基于NumPy 的一种工具&#xff0c;该工具是为了解决数据分析任务而创建的。 Pandas 是python的一个数据分析包&#xff0c;最初由AQR Capital Management于2008年4月开发&#xff0c;并于2009年底开源…

Javaweb之Vue指令案例的详细解析

2.3.5 案例 需求&#xff1a; 如上图所示&#xff0c;我们提供好了数据模型&#xff0c;users是数组集合&#xff0c;提供了多个用户信息。然后我们需要将数据以表格的形式&#xff0c;展示到页面上&#xff0c;其中&#xff0c;性别需要转换成中文男女&#xff0c;等级需要…

Consistency Models 阅读笔记

Diffusion models需要多步迭代采样才能生成一张图片&#xff0c;这导致生成速度很慢。Consistency models的提出是为了加速生成过程。 Consistency models可以直接一步采样就生成图片&#xff0c;但是也允许进行多步采样来提高生成的质量。 Consistency models可以从预训练的扩…

制作Go程序的Docker容器

今天突然遇到需要将 Go 程序制作成 Docker 的需求&#xff0c;所以进行了一些研究。方法很简单&#xff0c;但是官方文档和教程有些需要注意的地方&#xff0c;所以写本文进行记录。 源程序 首先介绍一下示例程序&#xff0c;示例程序是一个 HTTP 服务器&#xff0c;会显示si…

Docker安装Zookeeper

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

教你轻松解决win系统ucrtbased.dll丢失的问题,亲测有效!

ucrtbased.dll是一个动态链接库文件&#xff08;DLL&#xff09;&#xff0c;它是Windows操作系统中的一部分&#xff0c;主要负责提供操作系统和应用程序所需的函数和接口。这个文件包含了操作系统和应用程序共同使用的通用代码&#xff0c;以确保不同程序之间的兼容性和稳定性…

webstorm/idea配置leetcode刷题

File -> settings -> Plugins -> 搜索leetcode 安装插件&#xff08;截图显示我已经安装过了&#xff09;&#xff0c;安装完成后点击OK操作&#xff0c;在编辑器四个边角就会出现一个leetcode的插件 File -> settings -> Tools-> Leetcode plugin 点击…

CorelDRAW2024最新版本的图形设计软件

CorelDRAW2024是Corel公司推出的最新版本的图形设计软件。CorelDRAW是一款功能强大的矢量图形编辑工具&#xff0c;被广泛用于图形设计、插图、页面布局、照片编辑和网页设计等领域。 1. 新增的设计工具&#xff1a;CorelDRAW 2024引入了一些全新的设计工具&#xff0c;使用户能…