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.rhkb.cn/news/346535.html

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

相关文章

Linux守护进程揭秘-无声无息运行在后台

在Linux系统中&#xff0c;有一些特殊的进程悄无声息地运行在后台&#xff0c;如同坚实的基石支撑着整个系统的运转。它们就是众所周知的守护进程(Daemon)。本文将为你揭开守护进程的神秘面纱&#xff0c;探讨它们的本质特征、创建过程&#xff0c;以及如何重定向它们的输入输出…

快准稳的文档解析工具,帮助构建性能优越的金融领域知识库问答产品

随着大模型应用落地速度加快&#xff0c;企业级应用相关技术模块日渐成熟&#xff0c;在各个行业领域&#xff0c;企业改革现有业务流程与生产方式、使用AI提高运作效率的可行性大幅度提升。其中&#xff0c;金融行业作为数据密集、更新快速的代表性行业之一&#xff0c;经常与…

【Go语言精进之路】构建高效Go程序:了解map实现原理并高效使用

&#x1f525; 个人主页&#xff1a;空白诗 &#x1f525; 热门专栏&#xff1a;【Go语言精进之路】 文章目录 引言一、什么是map1.1 map的基本概念与特性1.2 map的初始化与零值问题1.3 map作为引用类型的行为 二、map的基本操作2.1 插入数据2.2 获取数据个数2.3 查找和数据读取…

【必会面试题】自旋中的ABA问题

目录 ABA问题描述ABA问题的影响解决ABA问题的方案 \qquad 自旋锁&#xff08;spinlock&#xff09;是一种用于实现互斥同步的锁机制&#xff0c;其基本思想是让线程在等待获取锁的过程中不断地检查锁是否可用&#xff0c;而不是进入睡眠状态。自旋锁适用于锁被持有的时间较短&a…

TF-2.10 实现用 BERT 从文本中抽取答案

前言 本文详细介绍了用 tensorflow-gpu 2.10 版本实现一个简单的从文本中抽取答案的过程。 数据准备 这里主要用于准备训练和评估 SQuAD&#xff08;Standford Question Answering Dataset&#xff09;数据集的 Bert 模型所需的数据和工具。 首先&#xff0c;通过导入相关库…

jetson nano 系统克隆及烧录

一、背景 二、系统克隆 1、硬盘挂载 查看块设备&#xff0c;执行命令lsblk&#xff0c;结果如下 其中&#xff0c;nvme0n1是我们要挂载的设备。 2、将块设备nvme0n1分成1个分区&#xff0c;执行命令sudo fdisk /dev/nvme0n1&#xff0c;出现分区界 面如下 输入m可以查看分区…

记录vue一个echarts页面 柱状图加平均分横线 双柱状图 横向双柱状图

<template><div class"app-container"><el-form :model"queryParams" ref"queryForm" size"small" v-show"showSearch" label-width"85px"><el-form-item label"园所名称" prop&q…

windows11 将此电脑放在桌面上

桌面--右键--个性化 然后右侧&#xff0c;找到主题: 然后桌面图标设置&#xff1a; 然后勾选计算机: 最后&#xff0c;点击【确定】按钮&#xff0c;桌面上就会有此电脑的图标了。

AI大模型-机器学习中的集成学习

机器学习中的集成学习 集成学习概述及主要研究领域 1.1 集成学习概述&#x1f4a5; “众人拾柴火焰高”、“三个臭皮匠顶个诸葛亮”等词语都在表明着群体智慧的力量&#xff0c;所谓的“群体智慧”指的就是一群对某个主题具有平均知识的人集中在一起可以对某一些问题提供出更…

UE 像素流与 Web 协同开发

UE 像素流与 Web 协同开发 创建Web端应用Web向UE发送消息emitCommandemitConsoleCommandemitUIInteraction UE接收Web的消息UE向Web发送消息Web接收UE的消息UE 冻结帧 与Web交互主要涉及两个方面&#xff0c;一个是UE向Web发送消息&#xff0c;另一个就是Web端向UE程序发送消息…

5分钟在阿里云上部署了超级玛丽小游戏,是一种什么样的体验?

大家好&#xff0c;我是java1234_小锋老师&#xff0c;作为程序设计开发人员&#xff0c;云部署项目是最基本的技能。所以锋哥分享下如何在阿里云上部署项目&#xff0c;我们以部署超级玛丽网页小游戏为例&#xff0c;教大家熟悉Linux云服务器&#xff0c;熟悉宝塔应用&#xf…

影视制作的未来:云渲染+虚拟制作+AI生成技术

在计算机技术和人工智能技术飞速发展的2024年&#xff0c;影视制作正在经历一场前所未有的变革。云渲染、虚拟制作和AI生成等新影视制作技术的结合&#xff0c;正在重新定义数字内容的创作流程&#xff0c;为影视产业带来了全新的可能性和机遇。这些前沿技术不仅提高了制作效率…

Elasticsearch 为时间序列数据带来存储优势

作者&#xff1a;来自 Elastic Martijn Van Groningen, Kostas Krikellas 背景 Elasticsearch 最近投资了对存储和查询时间序列数据的更好支持。存储效率一直是关注的主要领域&#xff0c;许多项目取得了巨大的成功&#xff0c;与将数据保存在标准索引中相比&#xff0c;可以节…

电子设计新纪元:三品PLM系统在快速变革中的适应性

随着科技的飞速发展&#xff0c;电子行业正经历着前所未有的变革。产品生命周期的缩短、技术迭代的加速以及市场竞争的加剧&#xff0c;都对电子行业提出了更高的管理要求。在这样的背景下&#xff0c;传统的产品数据管理PDM和产品生命周期管理PLM系统显得力不从心。本文将探讨…

H.264官方文档下载

H.264是ITU&#xff08;International Telecommunication Union&#xff0c;国际通信联盟&#xff09;和MPEG&#xff08;Motion Picture Experts Group&#xff0c;运动图像专家组&#xff09;联合制定的视频编码标准。其官方文档可以在ITU官网上下载&#xff1a;https://www.…

使用 OPENAI API 微调 GPT-3 的 Ada 模型

前言 本文主要是介绍了使用 openai 提供的 api 来完成对开放出来的模型进行微调操作。开放的模型有 curie 、babbage、ada 等&#xff0c;我这里以微调 ada 举例&#xff0c;其他类似。 需要提前安装好 openai 所需要的各种库&#xff0c;我这里的库版本是 openai-0.25.0 。以…

【已解决】chrome视频无法自动播放的问题

问题&#xff1a; 在用datav开发大屏的时候&#xff0c;放了一个视频组件&#xff0c;但是发现视频组件即使设置了自动播放&#xff0c;仍然无法自动播放 原因&#xff1a; 76 以上版本的谷歌浏览器只能在系统静音下自动播放 解决&#xff1a; 音频自动播放浏览器白名单设置&…

计算机网络期末考试知识点(关键词:江中)

目录 大家端午节快乐呀&#xff01;又到了一年两度的期末考试月了&#xff0c;这里给大家整理了一些复习知识点&#xff0c;大家可以边吃粽子边复习&#xff0c;事半功倍哈哈哈。祝各位期末过&#xff01;过&#xff01;过&#xff01;。 1 第一章 计算机网络体系结构 计算机…

WT32-ETH01作为TCP Server进行通讯

目录 模块简介WT32-ETH01作为TCP Server设置W5500作为TCP Client设置连接并进行通讯总结 模块简介 WT32-ETH01网关主要功能特点: 采用双核Xtensa⑧32-bit LX6 MCU.集成SPI flash 32Mbit\ SRAM 520KB 支持TCP Server. TCP Client, UDP Server. UDP Client工作模式 支持串口、wi…

安全生产新篇章:可燃气体报警器检验周期的国家标准解读

随着工业化进程的加快&#xff0c;安全生产成为了重中之重。 可燃气体报警器作为预防火灾和爆炸事故的重要设备&#xff0c;其准确性和可靠性直接关系到企业的生产安全和员工的生命财产安全。 因此&#xff0c;国家对可燃气体报警器的检验周期有着明确的规定&#xff0c;以确…