HTML LocalStorage

一篇关于HTML本地存储的文章
Window.localStorage
只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。
localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除。

  • localStorage ,可以被长期保留。
  • sessionStorage,页面关闭,数据被清楚。
  • localStorage 中的键值对总是以字符串的形式存储。 (需要注意,和 js 对象相比,键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).
 myStorage = localStorage;//添加localStorage.setItem("myCat", "Tom");//获取let cat = localStorage.getItem("myCat");//删除
localStorage.removeItem("myCat");
// 移除所有
localStorage.clear();

如何获取localStorage中存储的所有值
直接使用localStorage即可,获取的值是一个对象。在浏览器控制台中打印结果如下

      storage=localStorage;var length = storage.lengthfor(var i=0;i<length;i++){var index = storage.key(i);console.log(storage.getItem(index));}

在这里插入图片描述

<html>
<script>//添加数据function add(){var text;text=document.getElementById('text').value;index=localStorage.length+1;localStorage.setItem(index,text);}//显示localStorage所有内容function showall(){storage=localStorage;var length = storage.lengthfor(var i=0;i<length;i++){var index = storage.key(i);console.log(storage.getItem(index));}//将内容显示到html上方便交互。var showall = document.getElementById("showall")showall.innerHTML = JSON.stringify(storage);}function clearall(){//清空所有的itemlocalStorage.clear();}
</script>
<body><p>输入需要添加的数据</p><input id="text" type="text"><button type="" onclick=add()>点击添加数据</button><button onclick=showall()>显示所有记录</button><button onclick=clearall()>清空所有记录</button><p id="showall"></p>
</body>
</html>

浏览器中查看Local Storage
在这里插入图片描述
输出的json对象是乱序排列的。
在这里插入图片描述

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

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

相关文章

大学生如何学习C语言编程?

设计语言》&#xff08;K&R&#xff09;和《C Primer Plus》。 安装开发环境&#xff1a;安装一个C语言编译器&#xff0c;如GCC&#xff0c;以及一个集成开发环境&#xff08;IDE&#xff09;&#xff0c;比如Code::Blocks或Visual Studio。 学习语法&#xff1a;熟悉C语…

redis03 补充 redis驱动模型:事件驱动

1.文件事件 1.1 1.2 注&#xff1a; epoll是linux系统的底层IO多路复用技术 kqueue是mac的底层IO多路复用技术 在 Epoll 中&#xff0c;Epoll 就是事件通知器&#xff0c;可以向 Epoll 注册我们感兴趣的事件。 1.3 1.4

群体优化算法----火山爆发算法介绍以及离散优化Pareto最优解示例

介绍 火山爆发算法&#xff08;Volcano Eruption Algorithm&#xff0c;VEA&#xff09;是一种新兴的群智能优化算法&#xff0c;其灵感来源于火山爆发的自然现象。火山爆发算法模拟了火山爆发过程中熔岩流动和喷发的行为&#xff0c;以寻找全局最优解。这种算法利用了火山爆发…

PR如何让音频淡入淡出

PR如何让音频淡入淡出 方法一&#xff1a;效果控件关键帧方法二&#xff1a;音频轨道关键帧 以淡入为例&#xff0c;介绍如何设置淡入的两种方法&#xff0c;推荐使用第二种。淡出效果类似。 方法一&#xff1a;效果控件关键帧 选中音频&#xff0c;点击效果控件 在淡入结束的…

C++ 中有符号数与无符号数的隐式转换与运算陷阱

尽管我们不会故意给无符号对象赋一个负值&#xff0c;却可能写出这样的代码。例如&#xff0c;当一个算术表达式既有无符号数又有int值时&#xff0c;那个int值就会转换成无符号数。把int转换成无符号数的过程和把int直接赋给无符号变量一样&#xff1a; #include <iostrea…

DevExpress学习系列文章

一&#xff1a;DevExpress Installed 二&#xff1a;Application UI 三&#xff1a;Data Management Controls 四&#xff1a;Skins 系列文章相关代码&#xff1a;DevExpressDemo: DevExpress学习过程中的Demo

react项目--博客管理

文章目录 技术栈登录存信息配置tokenhooks使用路由配置各页面技术总结首页发布文章文章详情页 个人主页分类页 本篇文章总结一个开发的react项目—博客系统 技术栈 React、react-redux、react-router 6&#xff0c;Ant Design&#xff0c;es6&#xff0c;sass&#xff0c;webp…

RPA-UiBot6.0数据整理机器人—杂乱数据秒变报表

前言 友友们是否常常因为杂乱的数据而烦恼?数据分类、排序、筛选这些繁琐的任务是否占据了友友们的大部分时间?这篇博客将为友友们带来一个新的解决方案,让我们共同学习如何运用RPA数据整理机器人,实现杂乱数据的快速整理,为你的工作减负增效! 在这里,友友们将了…

成功解决No module named ‘sklearn’(ModuleNotFoundError)

成功解决No module named ‘sklearn’(ModuleNotFoundError) &#x1f308; 欢迎莅临我的个人主页&#x1f448;这里是我深耕Python编程、机器学习和自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;并乐于分享知识与经验的小天地&#xff01;&#x1f387; &#x1f…

AI 边缘计算平台 - 回归开源 BeagleY-AI 简介

BeagleBoard.org 于 3 月 27 号发布了一款单板计算机 BeagleY-AI &#xff0c;这款 SBC 凭借其完全开源的特性&#xff0c;旨在激发并推动开源社区的生态系统繁荣发展。 一、简介&#xff1a; BeagleY-AI 采用德州仪器新推出的 AM67A AI 视觉处理器。这款处理器集成了四个 64…

开源模型应用落地-LangChain高阶-LCEL-表达式语言(五)

一、前言 尽管现在的大语言模型已经非常强大,可以解决许多问题,但在处理复杂情况时,仍然需要进行多个步骤或整合不同的流程才能达到最终的目标。然而,现在可以利用langchain来使得模型的应用变得更加直接和简单。 LCEL是什么? LCEL是一种非常灵活和强大的语言,可以帮助您更…

UE5基础1-下载安装

目录 一.下载 二.安装 三.安装引擎 四.其他 简介: UE5&#xff08;Unreal Engine 5&#xff09;是一款功能极其强大的游戏引擎。 它具有以下显著特点&#xff1a; 先进的图形技术&#xff1a;能够呈现出令人惊叹的逼真视觉效果&#xff0c;包括高逼真的光影、材…

Redis原理篇——哨兵机制

Redis原理篇——哨兵机制 1.Redis哨兵2.哨兵工作原理2.1.哨兵作用2.2.状态监控2.3.选举leader2.4.failover 1.Redis哨兵 主从结构中master节点的作用非常重要&#xff0c;一旦故障就会导致集群不可用。那么有什么办法能保证主从集群的高可用性呢&#xff1f; 2.哨兵工作原理 …

备战 清华大学 上机编程考试-冲刺前50%,倒数第4天

T1:四操作 有一个n个元素的数列,元素的值只能是0 1 2三个数中的一个&#xff0c;定义四种操作&#xff0c;(1 i x)表示为把第i位替换成x&#xff0c;x也只能是0 1 2三个数中的一个&#xff0c;(2 i j)表示把第i个数到第j个数所有的元素值加1&#xff0c;并对3取模&#xff0c;…

【JS重点06】作用域(面试重点)

目录 一:局部作用域 1 函数作用域 2 块作用域 二:全局作用域 三:作用域链 变量查找机制: 本文章目标:了解作用域对程序执行的影响及作用域链的查找机制 作用域:规定了变量能够被访问的”范围“,离开这个”范围“变量便不能被访问 一:局部作用域 局部作用域分为…

CDR2024软件破解Keygen激活工具2024最新版

CorelDRAW Graphics Suite2024最新版&#xff0c;这是一款让我爱不释手的图形设计神器&#xff01;作为一个软件评测专家&#xff0c;我一直在寻找一款能够提升我的设计效率和创造力的工具。而这款软件&#xff0c;简直就是为我量身定制的&#xff01;&#x1f389; 「CorelDR…

C#进阶高级语法之LINQ

&#x1f433;简介 LINQ是C#编程语言中的一项强大功能&#xff0c;它通过将查询直接集成到编程语言中&#xff0c;大幅度简化了数据查询的代码编写工作。 LINQ的应用场景&#xff1a; 数据源支持&#xff1a;LINQ可查询的数据源类型极为广泛&#xff0c;包括SQL Server数据库…

插卡式仪器模块:示波器模块(插卡式)

• 12 位分辨率 • 125 MSPS 采样率 • 支持单通道/双通道模块选择 • 可实现信号分析 • 上电时序测量 • 抓取并分析波形的周期、幅值、异常信号等指标 • 电源纹波与噪声分析 • 信号模板比对 • 无线充电&#xff08;信号解调&#xff09; 通道12输入阻抗Hi-Z, 1 MΩ…

检索增强生成RAG需要用到的10个资源、工具和Python库

●10个资源和工具 在机器学习和自然语言处理领域&#xff0c;有多种工具和框架可用于实现和使用检索增强型生成&#xff08;RAG&#xff09;模型。以下是一些关键的资源和工具&#xff1a; Hugging Face Transformers&#xff1a; Hugging Face在其广泛使用的Transformers库…

CountDownLatch闭锁

Java并发库提供了CountDownLatch类来实现这个功能。 CountDownLatch类是一个同步工具类&#xff0c;在完成某些运算时&#xff0c;只有其他所有的运算全部完成&#xff0c;当前运算才继续执行。 下面是一个案例来说明CountDownLatch&#xff1a; 说明&#xff1a;当前有 5 个…