API-本地存储

学习目标:

  • 掌握本地存储

学习内容:

  1. 本地存储介绍
  2. 本地存储分类
  3. 存储复杂数据类型

本地存储介绍:

以前我们页面写的数据一刷新页面就没有了,是不是?

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。

  • 数据存储在用户浏览器中。

  • 设置、读取方便、甚至页面刷新不丢失数据。

  • 容量较大,sessionStoragelocalStorage约5M左右。

  • 常见的使用场景:

    https://todomvc.com/examples/vanilla-es6/   页面刷新数据不丢失
    

本地存储分类:

  • localStorage

作用:可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在。

特性:

1. 可以多窗口(页面)共享(同一浏览器可以共享)。
2. 以键值对的形式存储使用。

语法:

//1.存储数据
localStorage.setItem('键','值')
//2.获取数据
localStorage.getItem('键')
//3.删除数据
localStorage.removeItem('键')
 <title>本地存储-localstorage</title>
</head><body><script>//1.要存储一个名字  uname  雪碧宝宝// localStorage.setItem('键','值')localStorage.setItem('uname', '雪碧宝宝')//2.获取方式 都加引号console.log(localStorage.getItem('uname'))//3.删除本地存储  只删除名字// localStorage.removeItem('uname')//4.改  如果原来有这个键,则是改;如果没有这个键是增localStorage.setItem('uname', '丸子宝宝')//我要存一个年龄//2.本地存储只能存储字符串数据类型localStorage.setItem('age', 18)console.log(localStorage.getItem('age'))</script></body>

在这里插入图片描述

  • sessionStorage

特性:

  1. 生命周期为关闭浏览器窗口。
  2. 在同一窗口(页面)下数据可以共享。
  3. 以键值对的形式存储使用。
  4. 用法跟localStorage基本相同。

存储复杂数据类型:

  • 本地只能存储字符串,无法存储复杂数据类型。
<title>存储复杂数据类型</title>
</head><body><script>const obj = {uname: '雪碧小朋友',age: 18,gender: '男'}// //存储 复杂数据类型 无法直接使用localStorage.setItem('obj', obj)  //  [object object] // //取console.log(localStorage.getItem('obj'))</script></body>

在这里插入图片描述

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

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

<title>存储复杂数据类型</title>
</head><body><script>const obj = {uname: '雪碧小朋友',age: 18,gender: '男'}//1.复杂数据类型存储必须转换为 JSON字符串存储localStorage.setItem('obj', JSON.stringify(obj))//JSON对象 属性和值有引号,而且引号统一为双引号// {"uname":"雪碧小朋友","age":18,"gender":"男"}//取// console.log(typeof localStorage.getItem('obj'))//2.把json字符串转换为 对象const str = localStorage.getItem('obj') //{"uname":"雪碧小朋友","age":18,"gender":"男"}console.log(JSON.parse(str))</script></body>

在这里插入图片描述

  • 注意:

因为本地存储里面取出来的是字符串,不是对象,无法直接使用,因此,需要将取出来的字符串转换为对象

JSON.parse(JSON字符串)

//2.把json字符串转换为 对象const str = localStorage.getItem('obj') //{"uname":"雪碧小朋友","age":18,"gender":"男"}console.log(JSON.parse(str))

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

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

相关文章

算法基础入门 - 2.栈、队列、链表

文章目录 算法基础入门第二章 栈、队列、链表2.1 队列2.2 栈2.3 纸牌游戏2.4 链表如何建立链表?1.我们需要一个头指针(head)指向链表的初始。链表还没建立时头指针head为空2.建立第一个结点3.设置刚创建的这个结点的数据域(左半)和指针域(右半)4.设置头指针,头指针可方便…

【鸿蒙学习笔记】运算符

官方文档&#xff1a;ArkTS语言介绍 目录标题 赋值运算符比较运算符一元运算符&#xff1a;自增自减运算符二元运算符位运算符逻辑运算符 赋值运算符 运算符解释解释赋值运算符x x y加-x x - y减*x x * y乘/x x / y除%x x % y取余<<x x << y按位左移>&…

问题-小技巧-专业版Win11怎么启动电脑的休眠模式?

专业版Win11怎么启动电脑的休眠模式&#xff1f; powercfg -a powercfg -hibernate on 启用管理员面板依次输入上述命令就可以了。

宠物医院管理系统-计算机毕业设计源码07221

目 录 1 绪论 1.1 选题背景和意义 1.2国内外研究现状 1.3论文结构与章节安排 2 宠物医院管理系统系统分析 2.1 可行性分析 2.1.1技术可行性分析 2.1.2 操作可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分…

【python爬虫】总结反反爬的技巧

1. 当请求失败时重复请求 def get_url(url):try:response requests.get(url, timeout10) # 超时设置为10秒except:for i in range(10): # 循环去请求网站response requests.get(url, proxiesproxies, timeout20)if response.status_code 200:breakreturn response2. 适当…

C++ 教程 - 09 多线程处理

文章目录 thread标准库pthread库 thread标准库 C 11 后添加了新的标准线程库 std::thread 类&#xff0c;需引入头文件<thread>声明即创建线程对象&#xff0c;如 thread th1&#xff1b; 调用无参构造&#xff0c;生成一个空的线程对象&#xff1b;thread th(callable&…

VL31N BAPI:GN_DELIVERY_CREATE创建内向交货单同时批次拆分

翻到之前写的测试代码&#xff0c;记录一下&#xff0c;用于创建DN的同时就进行批次拆分&#xff0c;不需要再调用变更的BAPI再去修改一次。 REPORT ZTEST_VL31N_BATCH_SPLIT.DATA:GS_VBSK_I TYPE VBSK, "構造:販売伝票ヘッダINGS…

2023-2024华为ICT大赛中国区 实践赛云赛道 全国总决赛 理论部分真题

Part 1 大数据模块(3题)&#xff1a; 1、以下关于特征选择中的互信息法描述中&#xff0c;理解正确的是哪些?(多选题) A.互信息法是从信息熵的角度分析特征和输出值之间的关系评分 B.在Python工具的sklearn模块中&#xff0c;可使用mutual_info_classif(分类)和mutual_info…

AI智能在Type-C领域的应用

随着科技的飞速发展&#xff0c;Type-C接口凭借其卓越的性能和广泛的应用场景&#xff0c;已成为现代电子设备中不可或缺的一部分。而AI智能技术的兴起&#xff0c;为Type-C领域带来了革命性的变革&#xff0c;推动了其功能的进一步完善和应用领域的拓展。本文将探讨AI智能在Ty…

用技术手段有效应对CC攻击

在网络安全领域&#xff0c;CC攻击&#xff08;Challenge Collapsar&#xff0c;即HTTP Flood攻击的一种&#xff09;是一种常见的分布式拒绝服务&#xff08;DDoS&#xff09;攻击手段&#xff0c;它通过大量合法的HTTP请求耗尽服务器资源&#xff0c;导致正常用户访问缓慢甚至…

【cocos2dx】【c++】【游戏开发】旧题新说,计算两个日期相差几天,在指定的天数弹出相应的弹窗

【cocos2dx】【c】计算两个日期相差几天&#xff0c;在指定的天数弹出相应的弹窗 设备/引擎&#xff1a;Mac&#xff08;11.6&#xff09;/Mac Mini 开发工具&#xff1a;Xcode&#xff08;15.0.1&#xff09; 开发需求&#xff1a;计算两个日期相差几天&#xff0c;在指定的…

中文翻译老挝语只推荐一个神器《老挝语翻译通》App,老挝语口语发音练习,支持老挝文OCR识别提取文字!

出国旅游去探索东南亚的神秘国家&#xff1a;老挝&#xff0c;不会老挝语怎么办&#xff1f;不用怕&#xff0c;下载《老挝语翻译通》App帮助你把中文翻译成老挝语。 功能亮点&#xff1a; 实时翻译&#xff1a;实时把中文翻译成老挝语&#xff0c;老挝语单词或者句子均可均可…

typescript学习回顾(三)

今天继续来分享ts的相关概念&#xff0c;枚举&#xff0c;ts模块化&#xff0c;接口和类型兼容性 ts的扩展类型&#xff1a;类型别名&#xff0c;枚举&#xff0c;接口和类 枚举 基础概念 枚举通常用于约束某个变量的取值范围。当然字面量和联合类型配合使用&#xff0c;也可…

Redis 配置详解

文章目录 Redis 配置详解网络持久化复制安全客户端内存管理延迟释放仅追加模式LUA集群慢指令延迟监控事件通知高级配置主动碎片整理 Redis 配置详解 网络 ########################## NETWORK ########################## bind&#xff1a;指定 Redis 只接收来自于特定 IP 地…

Linux 高级编程——线程控制

线程控制&#xff1a;互斥与同步 概念&#xff1a; 互斥 》在多线程中对临界资源的排他性访问。 互斥机制 》互斥锁 》保证临界资源的 访问控制。 pthread_mutex_t mutex; 互斥锁类型 互斥锁变量 内核对象 框架&#xff1a; 定义互斥锁 》初始化锁 》加…

前端——在本地搭建Vue单页应用

目录 1、安装最新node.js 2、打开命令行窗口 3、进入要保存项目的目录下 4、安装 Vue CLI 5、创建新项目&#xff0c;选择功能 5.1 新建项目 5.2 Please pick a preset 5.3 Check the features needed for your project 5.4 Choose a version of Vue.js 5.5 Use hist…

Android13 串口控制是能wifi adb实现

Android13 串口控制是能wifi adb实现 文章目录 一、前言二、Android 串口控制是能wifi adb实现1、通过Settings属性控制2、通过prop属性控制3、wifi adb 对应的Settings属性和prop属性关系&#xff08;1&#xff09;属性监听&#xff08;2&#xff09;相关代码位置&#xff08;…

优化数据库字段使用位运算-php语言示例

背景&#xff1a;一个会员有三个状态&#xff0c;A、B、C&#xff0c;其中一个人可以为 A、B、C、AB&#xff1b;之前数据表结构加了三个字段is_a、is_b、is_c; 本人实在不想这样粗糙的实现需求&#xff0c;遂决定用位运算优化。 上代码&#xff1a; 位运算可以用来处理状态值…

探索SOLIDWORKS 2024设计增强功能

随着技术的不断进步和市场的日益竞争&#xff0c;工程设计和制造行业对于快捷、准确和创新的工具需求日益增长。SOLIDWORKS作为3D CAD设计软件&#xff0c;一直致力于为用户提供更强大、更便捷的设计工具。SOLIDWORKS 2024的发布&#xff0c;再次证明了其在设计增强功能方面的持…

使用 Amazon Bedrock Converse API 简化大语言模型交互

本文将介绍如何使用 Amazon Bedrock 最新推出的 Converse API&#xff0c;来简化与各种大型语言模型的交互。该 API 提供了一致的接口&#xff0c;可以无缝调用各种大型模型&#xff0c;从而消除了需要自己编写复杂辅助功能函数的重复性工作。文中示例将展示它相比于以前针对每…