day34 本地存储(重要)

目录

    • 本地存储简介
    • 本地存储分类—— localStorage
    • 本地存储分类—— sessionStorage(了解)
    • 存储复杂数据类型
      • 问题1:本地只能存储字符串,无法存储复杂数据类型。
      • 问题2:因为本地存储里面取出来的是字符串,不是对象,无法直接使用。

本地存储简介

  • 本地存储:将数据存储在本地浏览器中

  • 好处:

    1. 数据存储在用户浏览器
    2. 页面刷新或者关闭不丢失数据,实现数据持久化
    3. 容量较大,sessionStorage和 localStorage 约 5M 左右

本地存储分类—— localStorage

  • 作用: 数据可以长期保留在本地浏览器中,刷新页面和关闭页面,数据也不会丢失,除非手动删除,否则关闭页面也会存在

  • 特性:

    • 可以多窗口(页面)共享(同一浏览器可以共享)
    • 键值对的形式存储,并且存储的是字符串,省略了window
  • 语法:

    • 存储数据:localStorage.setItem(key,value)

示例:

<script>//存储一个名字 uname// localStorage.setItem(key, value)localStorage.setItem('uname', 'zhezhe')</script>

在这里插入图片描述

  • 获取数据:localStorage.getItem(key)

示例:console.log(localStorage.getItem('uname'));

在这里插入图片描述

  • 删除数据:localStorage.removeItem(key)

示例:localStorage.removeItem('uname')

本地存储分类—— sessionStorage(了解)

  • 特性:

    • 生命周期为关闭浏览器窗口
    • 在同一个窗口(页面)下数据可以共享
    • 以键值对形式存储使用
    • 用法跟localStorage基本相同;区别是:当页面浏览器被关闭时,存储在 sessionStorage 的数据会被清除
  • 存储:sessionStorage.setItem(key,value)

  • 获取:sessionStorage.getItem(key)

  • 删除:sessionStorage.removeItem(key)

存储复杂数据类型

问题1:本地只能存储字符串,无法存储复杂数据类型。

<body><script>const obj = {uname: 'zhezhe',age: 20,gender: 'male'}localStorage.setItem('obj', obj)console.log(localStorage.getItem('obj'));</script>
</body>

在这里插入图片描述
在这里插入图片描述

存储复杂数据类型,无法直接使用。

  • 解决:需要将复杂数据类型转换成 JSON字符串,在存储到本地

  • 语法:JSON.stringify(复杂数据类型)

  • JSON字符串:

    • 首先是1个字符串
    • 属性名使用双引号引起来,不能单引号
    • 属性值如果是字符串型也必须双引号

示例:

<script>const obj = {uname: 'zhezhe',age: 20,gender: 'male'}// localStorage.setItem('obj', obj)// console.log(localStorage.getItem('obj'));// 复杂数据类型存储必须转换为JSON字符串存储localStorage.setItem('obj', JSON.stringify(obj))console.log(localStorage.getItem('obj'));</script>

在这里插入图片描述
在这里插入图片描述

问题2:因为本地存储里面取出来的是字符串,不是对象,无法直接使用。

  • 解决: 把取出来的字符串转换为对象

  • 语法:JSON.parse(JSON字符串)

<script>const obj = {uname: 'zhezhe',age: 20,gender: 'male'}// localStorage.setItem('obj', obj)// console.log(localStorage.getItem('obj'));// 复杂数据类型存储必须转换为JSON字符串存储localStorage.setItem('obj', JSON.stringify(obj))console.log(localStorage.getItem('obj'))const str = localStorage.getItem('obj')console.log(JSON.parse(str))</script>

在这里插入图片描述

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

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

相关文章

react将选中文本自动滑动到容器可视区域内

// 自动滚动到可视区域内useEffect(() > {const target ref;const wrapper wrapperRef?.current;if (target && wrapperRef) {const rect target.getBoundingClientRect();const wrapperRect wrapper.getBoundingClientRect();const isVisible rect.bottom &l…

消息队列MQ 介绍

&#x1f47d;System.out.println(“&#x1f44b;&#x1f3fc;嗨&#xff0c;大家好&#xff0c;我是代码不会敲的小符&#xff0c;双非大四&#xff0c;Java实习中…”); &#x1f4da;System.out.println(“&#x1f388;如果文章中有错误的地方&#xff0c;恳请大家指正&a…

掌握虚拟化与网络配置之道:深入浅出VMware及远程管理技巧

目录 虚拟机介绍 虚拟机的关键字 服务器架构的发展 为什么用虚拟机VMware 虚拟机和阿里云的区别 功能角度 价格因素 应用场景 优势方面 找到windows的服务管理 配置VMware 关于VMware安装的几个服务 vmware如何修改各种网络配置 关于NAT的详细信息(了解) NAT(网…

我的docker随笔43:问答平台answer部署

本文介绍开源问答社区平台Answer的容器化部署。 起因 笔者一直想搭建一个类似stack overflower这样的平台&#xff0c;自使用了Typora&#xff0c;就正式全面用MarkdownTyporagit来积累自己的个人知识库&#xff0c;但没有做到web化&#xff0c;现在也还在探索更好的方法。 无…

常见的ANSI转义码

ANSI 转义码是一组控制码&#xff0c;用于在文本中添加格式化和颜色。这些码以 ESC&#xff08;Escape&#xff09;字符为开头&#xff0c;通常是 \x1b&#xff0c;后面紧跟着一系列参数和指令。在 ANSI 标准中&#xff0c;这些码通常用于控制终端的文本输出。 下面是一些常见…

springboo冬奥会科普平台源码和论文

随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理平台应运而生&#xff0c;各行各业相继进入信息管理时代&#xf…

cocos creator 3.x 预制体无法显示

双击预制体&#xff0c;进入详情页&#xff0c;没有显示资源 Bomb 是个预制体&#xff0c;但是当我双击进来什么都没有了&#xff0c;无法对预制体进行可视化编辑 目前我只试出来一个解决方法&#xff1a; 把预制体拖进Canvas文件中&#xff0c;这样就能展示到屏幕上&#xff…

为什么要设置止损

2024年1月至2月7日&#xff0c;A股最令人瞩目的事件就是代表小微盘的中证500和中证1000雪球连续敲入&#xff0c;以及万得微盘指数的崩塌&#xff08;1个月下跌50%&#xff09;。 这次的这个过程中&#xff0c;止损很重要。一般情况下&#xff0c;如果设置了20%回撤止损的话&am…

挑战杯 python opencv 深度学习 指纹识别算法实现

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python opencv 深度学习 指纹识别算法实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;4分创新点&#xff1a;4分 该项目较为新颖…

多线程JUC:解决线程安全问题——synchronized同步代码块、Lock锁

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;多线程&JUC&#xff1a;线程的生命周期与安全问题 &#x1f4da;订阅专栏&#xff1a;多线程&JUC 希望文章对你们有所帮…

【DC渗透系列】DC-4靶场

主机发现 arp-scan -l┌──(root㉿kali)-[~] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:6b:ed:27, IPv4: 192.168.100.251 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.100.1 00:50:56:c0:00:08 …

记录 | python list extend()

extend() 函数用于在列表末尾一次性追加另一个序列中的多个值&#xff08;用新列表扩展原来的列表&#xff09;。 以下实例展示了 extend()函数的使用方法&#xff1a; #!/usr/bin/pythonaList [123, xyz, zara, abc, 123]; bList [2009, manni]; aList.extend(bList)print …

大厂聚合支付系统架构演进(下)

点击下方“JavaEdge”&#xff0c;选择“设为星标” 第一时间关注技术干货&#xff01; 关注我&#xff0c;紧跟本系列专栏文章&#xff0c;咱们下篇再续&#xff01; 作者简介&#xff1a;魔都国企技术专家兼架构&#xff0c;多家大厂后端一线研发经验&#xff0c;各大技术社区…

VMware17上安装centos7.9

一、下载安装包&#xff1a; 1、VMware安装 VMware 下载地址&#xff1a; https://www.vmware.com/cn/products/workstation-pro.html VMware下载后安装即可 安装教程可以参考VMware安装教程 2、CentOs7.9下载地址&#xff1a; http://mirrors.aliyun.com/centos/7.9.2009/iso…

揭秘实战胜利秘籍!2023冬季波卡黑客松获奖团队经验分享全回顾

2023 冬季波卡黑客松大赛 已在香港圆满结束&#xff01;自 2023 年 11 月 1 日报名通道开启以来&#xff0c;2023 冬季波卡黑客松大赛一直备受全球 Web3 爱好者的瞩目。本届波卡黑客松大赛报名人数达到 342 人&#xff0c;总参赛项目高达 111 个&#xff0c;相比上一届增长 39%…

股票均线的使用方法和实战技术,看涨看空的均线形态与案例教学

一、教程描述 本套教程讲解了14种均线的特殊形态&#xff0c;通过直观图形以及大量案例的教学&#xff0c;将深奥、繁琐的均线变得生动与具体&#xff0c;广大投资者在认真学习以后&#xff0c;可以学会均线的使用方法&#xff0c;掌握最强的均线应用实战技术。本套教程不仅适…

freeRTOS总结(十四)任务通知

1、任务通知 任务通知&#xff1a; 用来通知任务的&#xff0c;任务控制块中的结构体成员变量ulNotifiedValue就是这个通知值 使用队列、信号量、事件标志组时都需另外创建一个结构体&#xff0c;通过中间的结构体进行间接通信&#xff01; 使用任务通知时&#xff0c;任务结…

【错误收录】ohpm ERROR: Install failed FetchPackageInfo: @ohos/hypium failed

创建APP的时候出现这样一个错误&#xff0c;是代理没有配置的原因 ohpm.bat install --registry https://repo.harmonyos.com/ohpm/ ohpm WARN: ETIMEDOUT Failed to search for package "ohos/hypium" from "https://repo.harmonyos.com/ohpm/", request…

教你怎么前端实现埋点上报

公众号&#xff1a;程序员白特&#xff0c;可加前端技术交流群 前言 只有了解用户&#xff0c;我们才能服务好用户&#xff0c;而最接近用户的我们&#xff0c;自然要承担起更多的责任。 那么在一个企业中&#xff0c;我们要如何去了解用户呢&#xff1f; 最直接有效的方式就是…

xinput1_3.dll丢失怎么办?7种不同解决方法分享

xinput1_3.dll是微软Microsoft DirectX的一个重要动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它主要与DirectInput API相关&#xff0c;为Windows操作系统中的游戏和应用程序提供对各种输入设备的支持。以下是关于xinput1_3.dll的详细全面介绍&#xff1a; 1、属性…