WebStorage本地存储

WebStorage

  • WebStorage包含sessionStorage和localStorage。其存储内存一把在5MB左右(不同浏览器不同)

  • localStorage存储,当浏览器关闭在开启存储的数据不会被清除。

  • 清除浏览记录或操作localStorage可清除存储的数据

  • sessionStorage和localStorage的代码书写一致,当浏览器关闭在开启存储的数据会被清除。

  • <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
    </head>
    <body><h2>localStorage</h2><!-- onclick点击事件 --><button onclick="saveDate()">点我保存一个数据</button><button onclick="readDate()">点我读取一个数据</button><button onclick="deleteDate()">点我删除李四数据</button><button onclick="clearDate()">点我清空数据</button><script type="text/javascript">let  p = {name:'张三',age:18}
    ​function saveDate(){// 将'李四', 'hello'存储到localStorage,括号内的第一个元素对应key,第二个元素对应valuelocalStorage.setItem('李四', 'hello')//虽然传入的620为Number类型,但传入localStorage时自动转换成字符串型localStorage.setItem('李三', 620)// 传入对象时需要转换成JSON格式,不然对象都是[Object,object ]。JSON.stringify() 方法用于将 JavaScript 对象或值转换为一个 JSON 字符串。localStorage.setItem('p',JSON.stringify(p))}
    ​function readDate(){// 获取数值时只需要传入key值来获取valueconsole.log(localStorage.getItem('李四'));console.log(localStorage.getItem('李三'));// 首先获取p对象const person = (localStorage.getItem('p'));// 使用 JSON.parse() 方法,你可以将这个 JSON 字符串转换为一个 JavaScript 对象console.log(JSON.parse(person));}function deleteDate (){localStorage.removeItem('李四')}function clearDate (){localStorage.clear()}</script>
    ​
    </body></html>

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

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

相关文章

代码随想录刷题 | Day1

今日学习目标 一、基础 数组 array类 模板类vector 数组是存放在连续内存空间上的相同类型数据的集合。 数组可以方便的通过下标索引的方式获取到下标下对应的数据。 需要两点注意的是 数组下标都是从0开始的。 数组内存空间的地址是连续的 而且大家如果使用C的话&…

【AIGC表情prompt】提示词练习技巧

表情类提示词练习技巧 医疗机器人&#xff0c;男人笑脸景深&#xff0c;数据&#xff0c;座标&#xff0c;12k,c4d渲染&#xff0c;高分辨率&#xff0c;,暖色调&#xff0c;高清对比 医疗机器人&#xff0c;男人微笑&#xff0c;景深&#xff0c;数据&#xff0c;座标&#xf…

SpringCloud实战之Kubernetes项目运行示例

全文速览&#xff1a; 获取源码并加载环境spring-cloud-kubernetes下的示例mac minikube 本地构建执行SpringCloud-Kubernetes-Example 文章背景&#xff1a; 2019年开始 SpringCloud 开始向 K8S容器化流程演变&#xff0c;逐步诞生了【Spring-Cloud-Kubernetes】 环境要求&a…

mysql隔离级别和串行化

MySQL支持的隔离级别有四种&#xff0c;分别是&#xff1a; Read Uncommitted&#xff08;读未提交&#xff09; Read Committed&#xff08;读已提交&#xff09; Repeatable Read&#xff08;可重复读&#xff09; Serializable&#xff08;串行化&#xff09; 这些隔离级别…

nginx日志常见报错解决

目录 一&#xff1a;报错 二&#xff1a;php查看后台内容有的栏目出现502&#xff1f; 三&#xff1a;413 Request Entity Too Large? 四&#xff1a;Request Header Or Cookie Too Large 400 一&#xff1a;报错 upstream prematurely closed connection while reading r…

【C语言数组传参】规则详解

目录 数组传参介绍 数组传参规则 数组传参的实参 特殊情况一&#xff1a;sizeof&#xff08;数组名&#xff09; 特殊情况二&#xff1a;&数组名 数组传参的形参 数组传参使用数组名作为形参接收 形参如果是⼀维数组 形参如果是⼆维数组 数组传参使用指针作为形参…

Linux:apache优化(1)—— 长链接/保持连接

系统:CentOS 7.9 apache版本为&#xff1a;2.4.25 需要使用源码包进行安装才能够使用这些扩展模块 在使用这些扩展模块前要先下载zlib-devel 安装--enable-deflate选项需要的网页压缩传输的软件包 yum -y install zlib-devel 在配置编译安装时需要使用扩展配置 ./config…

滤波器opencv

在OpenCV中&#xff0c;滤波器用于对图像进行平滑、锐化、边缘检测等操作。以下是一些常用的滤波器及其在OpenCV中的Python代码示例&#xff1a; 均值滤波器&#xff08;平滑图像&#xff09;&#xff1a; import cv2 import numpy as np# 读取图像 image cv2.imread(path_t…

如何使用Docker将.Net6项目部署到Linux服务器(三)

目录 四 安装nginx 4.1 官网下载nginx 4.2 下载解压安装nginx 4.3 进行configure 4.4 执行make 4.5 查看nginx是否安装成功 4.6 nginx的一些常用命令 4.6.1 启动nginx 4.6.2 通过命令查看nginx是否启动成功 4.6.3 关闭Nginx 4.6.5 重启Nginx 4.6.6 杀掉所有Nginx进程 4.…

先序+中序还原二叉树【数据结构】

先序中序还原二叉树 题目描述 给定一棵二叉树的先序遍历序列和中序遍历序列&#xff0c;要求计算该二叉树的高度。 输入 输入首先给出正整数N&#xff08;≤50&#xff09;&#xff0c;为树中结点总数。下面两行先后给出先序和中序遍历序列&#xff0c;均是长度为N的不包含重…

C# 使用ZXing.Net识别二维码和条码

目录 写在前面 代码实现 调用示例 写在前面 上一篇写了 C# 使用ZXing.Net生成二维码和条码-CSDN博客 使用ZXing.Net解码非常简单&#xff0c;事实上就只用一行代码就好了&#xff0c;这么简单那为什么还要贴在这里呢&#xff0c;原因是开始时&#xff0c;在网上看资料看到…

Linux 编写脚本定时发送天气预报

1 首先要配置smtp服务 我这里使用的是qq邮箱 拿到smtp的密钥 2 配置mail.rc文件 在配置文件末尾加上 set from109456****qq.com #这里是发送邮件的地址 set smtpsmtp.qq.com:587 #阿里云一定要带上这个端口号&#xff0c;其他云服务商不用 set smtp-auth-user109456**** #…

Mybatis行为配置之Ⅳ—日志

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…

系统启动流程 - 理解modules加载流程

​编辑 Hacker_Albert    202 linux 启动流程module加载 1.启动过程分为三个部分 BIOS 上电自检&#xff08;POST&#xff09;引导装载程序 (GRUB2)内核初始化启动 systemd&#xff0c;其是所有进程之父。 1.1.BIOS 上电自检&#xff08;POST&#xff09; BIOS stands for…

前端网络面试:浏览器输入地址后发生了什么?

理解整块的内容涉及到的 UDP、TCP 以及 http、https 相关知识 1. 请求前 浏览器自动补全协议、端口浏览器自动完成 url 编码浏览器根据 url 地址查找本地缓存&#xff0c;根据缓存规则看是否命中缓存 若命中缓存则直接使用缓存&#xff0c;不再发出请求未命中直接请求 通过 DN…

图像拼接——基于homography的特征匹配算法

目录 1. 任务要求2. 数据集3. 基于homography的特征匹配算法4. 拼接流程展示4.1 图片实例4.2 特征点位图4.3 特征点匹配结果4.4 相机校准结果4.5 拼接结果 5. 部分图像拼接结果展示 1. 任务要求 输入&#xff1a;同一个场景的两张待拼接图像&#xff08;有部分场景重合&#x…

拓展操作(一) Linux 2台机器之间进行免密登录

让清单成为一种习惯 互联网时代的变革,不再是简单的开发部署上线,持续,正确,安全地把事情做好尤其重要;把事情做好的前提是做一个可量化可执行的清单,让工程师就可以操作的清单而不是专家才能操作: 设定检查点 根据节点执行检查程序操作确认或边读边做 二者选其一不要太…

macOS系统打开Linux的方法

第一步 按下[command空格键]调出搜索框&#xff0c;输入“终端”&#xff0c;打开图上第一个 第二步 如图先输入"sudo -i"&#xff0c;敲回车键&#xff0c;再输入开机密码&#xff0c;再敲回车键就可以打开。注意&#xff1a;这里的密码输入不会显示在页面。 如果要…

SpringMVC之RESTful案例

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

Qt基础之四十三:Qt智能指针(QPointer、QSharedPointer、QWeakPointer和QScopedPointer)

一.QPointer QPointer是一个模板类,用于指向QObject或其派生类对象。当QPointer指向的对象销毁时,它会被自动设置为nullptr(在QObject析构时),这和普通C++指针是不同的(普通的C++指针delete后会变为“悬空指针”,需要手动设置为nullptr)。 QPointer的使用场景:QPoint…