【BOM02】本地存储

一:什么是本地存储

数据存储在用户浏览器中,用户设置、读取方便,同时页面刷新时不会丢失数据。存储在浏览器中数据约5M,分为sessionStorage和localStorage两种存储方式

二:localStorage存储

作用

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

特性

以键值对的形式存储

可以在同一浏览器中多页面共享存储数据

使用语法规范

//存储数据
localStorage.setItem(key,value)
//移除数据
localStorage.removeItem(key,value)
//获取数据
localStorage.getItem(key)

注:存储的数据都会转变字符型数据,因为本地存储只能存取字符串;即使存储的是数值型、对象、数组等数据类型

三:sessionStorage存储

特性:

  • 生命周期为关闭浏览器窗口时停止
  • 在未关闭浏览器窗口的前提下,可以在同一个页面下共享数据
  • 以键值对形式存储使用
  • 语法规范同localStorage相同

四:存储复杂数据类型

由于本地存储只能存取字符串,所以即使是声明对象也无法将对象存储到浏览器中;因此,只能将对象转换成JSON形式存储

1 存语法格式(转换为JSON字符串)

localStorage.setItem(key,JSON.stringify(value))

2 将JSON字符串转换为对象

JSON.parse(待转化的字符串)

不光是对象,类似的数组也是需要这样转换

案例:

    const obj = {
      uname: 'orange',
      age: 18
    }
    localStorage.setItem('year', JSON.stringify(obj))
    const str = localStorage.getItem('year')
    console.log(JSON.parse(str));

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SSM整合总结

一.核心问题 (一)两个容器 web容器 web相关组件(controller,springmvc核心组件) root容器 业务和持久层相关组件(service,aop,tx,dataSource,mybatis,mapper等) 父容器:root容器,盛放service、mapper、…

【人工智能】流行且重要的智能算法整理

✍🏻记录学习过程中的输出,坚持每天学习一点点~ ❤️希望能给大家提供帮助~欢迎点赞👍🏻收藏⭐评论✍🏻指点🙏 小记: 今天在看之前写的文档时,发现有人工智能十大算法的内容&#xf…

Java概述 , Java环境安装 , 第一个Hello World

环境变量,HelloWorld 1.会常用的dos命令 2.会安装java所需要的环境(jdk) 3.会配置java的环境变量 4.知道java开发三步骤 5.会java的入门程序(HelloWorld) 6.会三种注释方式 7.知道Java入门程序所需要注意的地方 8.知道println和print的区别第一章 Java概述 1.1 JavaSE体系介绍…

Django 里的表格内容做修改

当Django里表格内容需要做修改&#xff0c;可以这么操作。 先看效果图 修改后的表格 1. 先得在 asset_list.html 里修改。你们的html有可能跟我不一样 <table border"1px"><thead><tr><th>ID</th><th>标题</th><th…

软件测试--Linux快速入门

文章目录 软件测试-需要掌握的Linux指令Linux命令操作技巧Linx命令的基本组成常用命令 软件测试-需要掌握的Linux指令 Linux命令操作技巧 使用Tab键自动补全上下键进行翻找之前输入的命令命令执行后无法停止使用CtrC,结束屏幕输出 Linx命令的基本组成 命令 [-选项] [参数] …

1.Linux入门

文章目录 一、介绍1.1 操作系统1.2 Linux1.3 虚拟机1.4 安装 CentOS7 二、远程连接 Linux2.1 FinalShell2.2 远程连接Linux 三、扩展3.1 WSL3.2 虚拟机快照 一、介绍 1.1 操作系统 我们平常所用的电脑是个人桌面操作系统&#xff0c;也就是Windows或者是macOS 目前我们要学的…

(2024,ViT,小波变换,图像标记器,稀疏张量)基于小波的 ViT 图像标记器

Wavelet-Based Image Tokenizer for Vision Transformers 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0 摘要 1 引言 3 基于小波的图像压缩简介 4 图像标记器 4.1 像素空间标记嵌…

短视频直播教学课程小程序的作用是什么

只要短视频/直播做的好&#xff0c;营收通常都不在话下&#xff0c;近些年&#xff0c;线上自媒体行业热度非常高&#xff0c;每条细分赛道都有着博主/账号&#xff0c;其各种优势条件下也吸引着其他普通人冲入。 然无论老玩家还是新玩家&#xff0c;面对平台不断变化的规则和…

Docker搭建ELKF日志分析系统

Docker搭建ELKF日志分析系统 文章目录 Docker搭建ELKF日志分析系统资源列表基础环境一、系统环境准备1.1、创建所需的映射目录1.2、修改系统参数1.3、单击创建elk-kgc网络桥接 二、基于Dockerfile构建Elasticsearch镜像2.1、创建Elasticsearch工作目录2.2、上传资源到指定工作路…

鸿蒙开发的南向开发和北向开发

鸿蒙开发主要分为设备开发和应用开发两个方向&#xff0c;也叫南向开发和北向开发&#xff1a; 鸿蒙设备开发(南向开发&#xff09;&#xff0c;要侧重于硬件层面的开发&#xff0c;涉及硬件接口控制、设备驱动开发、鸿蒙系统内核开发等&#xff0c;目的是使硬件设备能够兼容并…

端午假期来临,来使用闪侠惠递便宜寄快递吧!

相信很多人和我一样&#xff0c;每当需要寄快递时&#xff0c;总是感到十分头疼。不同的快递公司有不同的价格、时效和服务质量等等&#xff0c;选择起来真的很不容易。但是现在有了闪侠惠递来帮大家寄快递吧&#xff0c;这个问题就可以迎刃而解了&#xff01;小编奉劝大家快来…

性能级NVMe全闪存储系统开箱评测

近日&#xff0c;我们对一款备受瞩目的Infortrend普安科技推出更高性能的存储产品——性能级NVMe全闪存储系统GS 5024UE 进行评测&#xff0c;这款设备搭载第五代IntelXeon处理器&#xff0c;性能达到50GB/s、1.3M IOPS与0.3毫秒延迟。下面对此款设备从外观、配置、产品性能及适…

如何使用Vuforia AR进行增强现实技术的开发?

前言 今天是坚持写博客的第17天&#xff0c;很高兴自己可以一直坚持下来。我们今天来讲讲怎么使用Vuforia AR进行增强现实的开发。 我们需要在今天的开发中用到Vuforia AR和2018版的Unity3d 什么是Vuforia AR Vuforia AR是基于实时计算摄影机影像的位置及角度&#xff0c;并…

树的遍历详解

目录 树的静态写法 树的先根遍历 树的层次遍历 从树的遍历看DFS和BFS DFS与先根遍历 BFS与层次遍历 树的静态写法 这里讨论的树是一般意义上的树&#xff0c;即子结点个数不限且子节点没有先后次序的树。 建议使用静态写法进行结点的定义 struct node{typename data;i…

“新高考”下分班怎么分?

来自安徽的张女士告诉我&#xff1a;上一年孩子升入了高中&#xff0c;但没想到才高一&#xff0c;孩子就面临了一个困难的挑选&#xff1a;312”分班&#xff01; 什么是312”分班呢&#xff1f;许多人或许不明白&#xff0c;便是要求学生在高一入学时&#xff0c;针对于3门必…

Mac - Node/Java 配置安装全流程

Mac - Node/Java 配置安装全流程 一. Git 安装二. Java 相关安装2.1 jenv 版本控制工具2.2 JDK1.8 和 JDK21的安装2.3 maven 安装 三. Node 相关安装3.1 nvm 版本控制工具3.2 Node 版本安装 一. Git 安装 1.我们首先安装一下Homebrew&#xff0c;这个工具很有用&#xff0c;能…

Spring Security系列之PasswordEncoder

概述 任何一个登录系统的密码不能明文存储&#xff0c;万一发生数据库泄漏事故&#xff08;不管是内部人员导出数据库数据还是被黑客攻击破解数据库实例节点拿到数据库数据等&#xff0c;又或者是其他情况造成的&#xff09;&#xff0c;将产生巨大的损失。因此明文密码在存储…

react-学习基础偏

1.新建文件夹 2.vscode引入这个文件夹 3.打开vscode终端 执行命令 npx create-react-app react-basic 创建基本项目&#xff08;react-basic项目文件夹名&#xff09; 4.进入到这个文件夹 可用的一些命令 这就算启动成功 5. 这是项目的核心包 渲染流程

关于JavaScript技术的基础内容汇总

目录 JavaScript 基础知识1. JavaScript 基本语法2. 变量和常量3. 数据类型4. 运算符5. 控制结构6. 函数7. 对象8. 数组9. 事件处理10. DOM 操作 JavaScript 基础知识 学习 JavaScript&#xff08;简称 JS&#xff09;是前端开发的重要组成部分&#xff0c;它是一种动态的、弱…

【c语言】指针就该这么学(3)

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 一、函数指针 1.函数指针变量的创建 2.函数指针变量的使用 二、typedef关键字 三、函数指针数组 1.函数指针数组的概念 2.函数指针数…