Vue2 第十四节 scoped样式和本地存储

news2024/12/25 7:40:18

1.scoped样式

2.本地存储

一.scoped样式

① 作用:让样式在局部生效,防止冲突

② 写法:<style scoped>

③ 代码示例:

<style scoped>
.demo {
  background-color: lightblue;
}
</style>

④ scoped样式一般不会在App.vue中使用

二.本地存储

① 本地存储叫做webStorage, 存储的内容大小一般为5MB左右(不同浏览器可能不同)

② 浏览器可以通过 Window.sessionStorage(会话存储)  和 Window.localStorage(本地存储) 属性实现本地存储

③ 在哪里可以看到

④ 操作本地存储的API

 ⑤ sessionStorage 和 localStorage的区别

  • sessionStorage里面存储的内容会随着浏览器关闭而消失
  • localStorage 里面存储的内容,需要手动清除才会消失,浏览器关闭不会清除
  • XXXStorage.getItem(xxx) 如果 xxx 对应的 value 获取不到会返回 null
  • Json.parse(null) 的结果是 null

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

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

相关文章

【redis】创建集群

这里介绍的是创建redis集群的方式&#xff0c;一种是通过create-cluster配置文件创建部署在一个物理机上的伪集群&#xff0c;一种是先在不同物理机启动单体redis&#xff0c;然后通过命令行使这些redis加入集群的方式。 一&#xff0c;通过配置文件创建伪集群 进入redis源码…

分布式应用:ELK企业级日志分析系统

目录 一、理论 1.ELK 2.ELK场景 3.完整日志系统基本特征 4.ELK 的工作原理 5.ELK集群准备 6.Elasticsearch部署&#xff08;在Node1、Node2节点上操作&#xff09; 7.Logstash 部署&#xff08;在 Apache 节点上操作&#xff09; 8.Kiabana 部署&#xff08;在 Node1 节点…

C++设计模式之适配器设计模式

文章目录 C适配器设计模式什么是适配器设计模式该模式有什么优缺点优点缺点 如何使用 C适配器设计模式 什么是适配器设计模式 适配器设计模式是一种行为型设计模式&#xff0c;它允许你将两个不兼容的接口组合在一起&#xff0c;使它们能够协同工作。 该模式有什么优缺点 优…

elementUI全屏loading的使用(白屏的解决方案)

官网中有使用方法&#xff0c;但是我实际上手之后会出现白屏&#xff0c;解决办法如下&#xff1a; <el-button type"text" size"small" click"delRow(scope)"> 删除</el-button>loading: false, // loading 动画loadingInstance…

玩转Java IO流:轻松读写文件、网络

申明&#xff1a;本人于公众号Java筑基期&#xff0c;CSDN先后发当前文章&#xff0c;标明原创&#xff0c;转载二次发文请注明转载公众号&#xff0c;另外请不要再标原创 &#xff0c;注意违规 字符流和字节流 在Java中&#xff0c;IO&#xff08;输入输出&#xff09;操作涉…

TCP三次握手与四次断开

TCP三次握手机制 三次握手是指建立一个TCP连接时&#xff0c;需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。 1、客户端发送建立TCP连接的请求报文&#xff0c;其…

IDEA设置快捷操作

步骤&#xff1a; 1、 2、 3、 4、 然后直接用就可以啦 常用的接口测试模板&#xff1a; given().contentType(JSON).body($requestBody$).log().all().when().post($path$).then().log().all().statusCode(200);given().contentType(ContentType.JSON).body().log().all().w…

使用低代码平台提高生产力

一、前言 低代码平台的概念很火爆&#xff0c;产品也是鱼龙混杂。 对于开发人员来说&#xff0c;在使用绝大部分低代码平台的时候都会遇到一个致命的问题&#xff1a;我在上面做的项目无法得到源码&#xff0c;完全黑盒。一旦我的需求平台满足不了&#xff0c;那就是无解。 与其…

面试热题(无重复字符的最长子串)

无重复字符的最长子串 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。 解法一&#xff1a; public int lengthOfLonge…

UE4/5 PoseDriver 动画蓝图节点使用

PoseDriver节点可以进行Pose的比对&#xff0c;从而针对不同Pose生成不同权重数值&#xff0c;权重数值可应用至MorphTarget上使动画更加逼真&#xff0c;或应用至角色挂件上&#xff0c;制作出类惯性或弹簧的附加效果。 1.创建Pose 这里创建Box作为演示&#xff0c;下图大Bo…

【更新】119所院校考研重点勾画更新预告!

截至目前&#xff0c;我已经发布了47篇不同院校的择校分析。发布了87套名校信号考研真题以及119所不同院校的考研知识点重点勾画。 另外为了更好服务已经报名的同学&#xff0c;24梦马全程班也到了收尾的阶段。即将封班&#xff01;需要报名的同学抓紧啦&#xff01; 去年开始…

4-百度地图

4-百度地图 一 百度地图 1 前期准备 H5端和PC端,对接百度提供JavaScript API。 移动端,对接百度android SDK或ios SDK (1)打开百度地图开放平台 地址:https://lbsyun.baidu.com/ (2)选中开发文档——JavaScript Api 按照文档步骤开通百度开放平台并申请密钥 2 展示地…

Mysql5.8 Windows安装

1、下载安装包 MySQL :: Download MySQL Community Server 下载后解压到某个文件夹 2、配置环境变量 3.创建my.ini文件 [mysqld] # 设置3306端口 port3306 # 设置mysql的安装目录 basedirE:\\software\\mysql\\mysql-8.0.11-winx64 # 切记此处一定要用双斜杠\\&#xff0c;…

小白到运维工程师自学之路 第六十三集 (dockerfile安装sshd、httpd、nginx)

一、概述 Dockerfile的指令根据作用可以分为两种&#xff0c;构建指令和设置指令。构建指令用于构建image&#xff0c;其指定的操作不会在运行image的容器上执行&#xff1b;设置指令用于设置image的属性&#xff0c;其指定的操作将在运行image的容器中执行。 1、FROM 镜像:T…

Profinet转Modbus RTU从站模式的配置流程

兴达易控Profinet转Modbus RTU从站模式的配置流程需要按照以下步骤进行。首先&#xff0c;确保Profinet主站和Modbus RTU从站的设备之间有正确的连接&#xff0c;包括电气连接和网络连接。然后&#xff0c;在Profinet主站上设置适当的通信参数。 下面是具体操作&#xff1a;创…

electron+vue+ts窗口间通信

文章目录 一. 目的二.逻辑分析三. 代码示例 "types/node": "^20.3.1","vitejs/plugin-vue": "^4.1.0","vueuse/electron": "^10.2.1","electron": "^25.2.0","electron-packager":…

python基础2——数据类型

文章目录 一、字符串处理1.1 占位符1.2 拼接符1.3 统计字符串长度1.4 切片取值1.5 内置字符串处理方法 二、组合数据类型2.1 列表2.2 元组2.3 集合2.4 字典 三、数据类型转换 一、字符串处理 1.1 占位符 可以使用%s占位符在字符串中引用变量。 1.有两种写法。 name "qi…

Git笔记--Ubuntu上传本地项目到github

目录 1--基本配置 2--本地上传 1--基本配置 ① 创建ssh-key cd ~/.sshssh-keygen -t rsa -C "邮箱地址"② 查看并关联ssh-key gedit id_rsa.pub 复制内容&#xff0c;在 GitHub 中依次点击 Settings -> SSH and GPG keys -> New SSH key&#xff0c;将 id…

iperf3

iperf3输出的参数的信息 interval 发送一次数据的间隔 transfer 传输速率 kBytes s---秒 Bitrate bit比特。rate速率。bitrate比特率。比特率是指信息传播的速率。 Retr retry---重传 链接 cwnd 拥塞串口大小 jitter 抖动时间 lost/total lost--丢失的包 tot…

C++ 结构体和联合体

1.结构体 结构体是一种特殊形态的类&#xff0c;它和类一样&#xff0c;可以有自己的数据成员和函数成员&#xff0c;可以有自己的构造函数和析构函数&#xff0c;可以控制访问权限&#xff0c;可以继承&#xff0c;支持包含多态&#xff0c;结构体定义的语法和类的定义语法几…