Web API第九天学习总结
本地存储
特性
- 数据存储在用户浏览器中
- 设置、读取方便、页面刷新也不会丢失数据
- 容量较大、sessionStorage和localStorage约5M左右
localStorage
- 声明周期永久生效，除非手动删除否则关闭页面也会存在
- 可以多个窗口(页面)共享(同一个浏览器可以共享)
- 以键值对的形式存储使用
存储数据
语法
localStorage.setItem(key, value)
获取数据
语法
localStorage.getItem(key)
删除数据
语法
localStorage.removeItem(key)
清空数据
语法
localStorage.clear(key)
<body>
<input type="color">
<script>
const colorInput = document.querySelector("input");
colorInput.addEventListener("change",function() {
document.body.style.backgroundColor = this.value;
localStorage.setItem("date",this.value);
});
const date = localStorage.getItem("date");
document.body.style.backgroundColor = date;
</script>
</body>
存储复杂数据类型存储
- 本地存储无法存放复杂数据类型
- 复杂类型的数据通过JSON对象 字符串之间的转换来存储
JSON.stringify(复杂数据类型)
- 将复杂数据类型转换成JSON字符串 存储本地存储中
JSON.parse(JSON字符串)
- 将字符串转换成复杂数据类型 取出时使用
// 1 还是正常定义对象
const obj = {
name: '路飞',
height: 100,
weight: 200,
};
// 2 有好用的代码 ，可以帮我们快速把一个对象转成字符串
const objStr = JSON.stringify(obj);
// 3 本地存储 可以存储字符串类型的数据
localStorage.setItem("obj",objStr);
// 4 把本地存储的数据重新读取出来
const newObjStr = localStorage.getItem("obj");
// console.log(newObjStr);
// 5 你能不能帮 我 重新把 这个 字符串 解析成原来的对象
const newObj = JSON.parse(newObjStr);
console.log(newObj);
sessionStorage(了解)
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据共享
- 以键值对的形式存储使用
- 用法和localStorage基本相同
<script>
sessionStorage.setItem('date',123);
sessionStorage.getItem("date");
console.log(sessionStorage.getItem("date"));
// 用法和localStorage一样，区别就是当浏览器关闭时数据不会存在了
</script>
区别
- sessionStorage关闭页面后 数据就丢失
- localStorage除非是用户主动删除 否则数据一直存在
元素属性
固有属性
- 标签自带的属性 比如class id title等
- 可以直接使用点语法操作
<body>
<a href="#" aa="bb" data-index="0">链接</a>
<script>
//获取dom元素固有属性 通过点语法获取
const a = document.querySelector("a");
//获取固有属性
// console.log(a.href);
// 可以直接修改
// a.href = 'http://www.baidu.com';
</script>
</body>
自定义属性
- 程序员自己添加的属性
- 在DOM对象找不到
- 无法使用点语法操作
- 必须使用专门的API
自己起名字的自定义属性
获取自定义属性
getAttribute('属性名')
设置自定义属性
setAttribute('属性名', '属性值')
删除自定义属性
removeAttribute('属性名')
<body>
<a href="#" aa="bb" data-index="0">链接</a>
<script>
const a = document.querySelector("a");
//自定义属性 不能直接通过点方法来获取和设置
//获取 getAttribute('属性名')
a.getAttribute("aa");
console.log(a.getAttribute("aa"));
// 设置 setAttribute(key,value) 直接设置一个自定义的属性 前面key是属性名 后面value是属性值
a.setAttribute("hello","123");
// 删除属性 removeAttribute(key) 删除里面填写属性名
a.removeAttribute("hello");
</script>
</body>
data-自定义属性
- 传统的自定义属性没有专门的定义规则，开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性
- 属性的命名 data-xxx开头
- 获取的时候 a.dataset.xxx
- 设置 a.dataset.xxx = xxx;
<body>
<a href="#" aa="bb" data-index="0">链接</a>
<script>
const a = document.querySelector("a");
// 第二种自定义属性 H5建议
// 属性的命名 data-xxx开头
// 获取的时候 a.dataset.xxx
// 设置 a.dataset.xxx = xxx;
a.dataset.index = 3;
</script>
</body>
重绘和回流-了解
浏览器渲染页面的流程
- 解析HTML，生成DOM树
- 同时解析CSS，生成样式规则
- 根据DOM树和样式规则生成渲染树
- 进行布局(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
- 进行绘制 (重绘): 根据计算和获取的信息进行整个页面的绘制
- Display: 展示在页面上
回流/重排
影响到布局了就会有回流
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘。
事件-取消绑定
- 可以取消对应的事件类型和事件处理函数
- 无法取消 addEventListener 事件对应的匿名函数
<body>
<button>点击我点击我</button>
<script>
// removeEventListener 可以取消对应的事件类型和事件处理函数
// 无法取消 addEventListener 事件对应的匿名函数
const btn = document.querySelector("button");
function func() {
console.log("点击成功了");
}
function func2() {
console.log("你好");
}
//绑定事件 可以绑定多个同名事件 具名函数
btn.addEventListener("click",func);
btn.addEventListener("click",func2);
setTimeout(function() {
//取消绑定事件
btn.removeEventListener("click",func)
},5000);
</script>
</body>
字符串方法补充
- 字符串转大写
- 字符串转小写
- 字符串转数组
<body>
<script>
const msg = 'ABCDEFG';
// 1.字符串转大写 msg.toUpperCase()
// console.log(msg.toUpperCase());
// 2.转小写 msg.toLowerCase()
// console.log(msg.toLowerCase());
// 3.字符串转数组 msg.split('') 用什么分割字符串 如果字符串是a-b-c-d那么括号里应该写msg.split('-')
console.log(msg.split(''));
</script>
</body>
数组方法补充
- 数组转字符串
- 数组与数组的连接
<body>
<script>
const arr1 = ['a','b','c'];
const arr2 = ['1','2','3'];
// 1.数组转字符串 arr.join('') 括号里面也是拼接的方式 如果想字符串变成a-b-c-d那括号里就写arr.join('-');
console.log(arr1.join(''));
console.log(arr2);
// 2.数组与数组的连接 arr1.concat(arr2)
console.log(arr1.concat(arr2));
// 3.字符串也可以用 concat()方法来拼接字符串 但是很少用
// 因为可以直接用 + 号连接起来 字符串可以直接拼接
</script>
</body>
正则表达式
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
使用场景
- 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
- 比如用户名: /^[a-z0-9_-]{3,16}$/
- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
语法
1.定义正则表达式语法
let 变量名 = /表达式/ 其中/ /是正则表达式字面量
<body>
<script>
// 正则的作用 寻找字符串 检测这个字符串里面有没有我想要的字
const str = `梦想，是人对美好事物的憧憬与向往；梦想，是深藏在我们心中的秘密，是我们内心最强烈的渴望；梦想，是人生的正能量，它能点燃人生的希望`;
//判断一下有没有梦想两个字
// 定义规则
const reg = /刘同学/;
// 规则和字符串 匹配
console.log(reg.test(str)); //有就返回 true 没有就返回false
</script>
</body>
2.判断是否有符合规则的字符串
test() 方法 用来查看正则表达式与指定的字符串是否匹配
返回的是布尔类型
语法
regObj.test(被检测的字符串)
<body>
<script>
// 正则的作用 寻找字符串 检测这个字符串里面有没有我想要的字
const str = `梦想，是人对美好事物的憧憬与向往；梦想，是深藏在我们心中的秘密，是我们内心最强烈的渴望；梦想，是人生的正能量，它能点燃人生的希望`;
//判断一下有没有梦想两个字
// 定义规则
const reg = /刘同学/;
// 规则和字符串 匹配
console.log(reg.test(str)); //有就返回 true 没有就返回false
</script>
</body>
元字符
边界符
<body>
<script>
/* 边界符
^ 开头
& 结尾 */
const str = `你好吗？巫斌斌`;
// const reg = /你好/;//只要字符内包含你好就行 返回true
// const reg = /^你好$/;//必须要以“你”字开头 “好”字结尾 返回false
const reg = /^你/;//是“你”字开头就行 返回true
// const reg = /你&/;//是“你”字结尾就行 返回false
console.log(reg.test(str));
</script>
</body>
量词
<body>
<script>
/* const str = '路飞';
const reg = /路飞/;
console.log(reg.test(str));
这三行代码可以简写为下面一行代码
*/
console.log(/路飞/.test('路飞'));
// * 表示 放在它前面那一个字符 可以出现0次或者多次
// /^路*$/ => ""， 路，路路，路路路
// console.log(/^路*$/.test('')); // true
// console.log(/^路*$/.test('路')); // true
// console.log(/^路*$/.test('路路')); // true
// console.log(/^路*$/.test('路路路')); // true
// + 表示 放在它前面那一个字符 可以出现1次或者多次
// console.log(/^路+$/.test(''));
// console.log(/^路+$/.test('路'));
// console.log(/^路+$/.test('路路'));
// console.log(/^路+$/.test('路路路'));
// ？ 表示出现0次或者1次
// console.log(/^路?$/.test(''));// true
// console.log(/^路?$/.test('路')); // true
// console.log(/^路?$/.test('路路')); // false
// console.log(/^路?$/.test('路路路')); // false
// {n} 放在它前面的那一个字符 出现n次
// console.log(/^路{2}$/.test('')); // false
// console.log(/^路{2}$/.test('路')); // false
// console.log(/^路{2}$/.test('路路')); // true
// console.log(/^路{2}$/.test('路路路')); // false
// {n,} 放在它前面的字符 最少出现n次
// console.log(/^路{2,}$/.test('')); // true
// console.log(/^路{2,}$/.test('路')); // true
// console.log(/^路{2,}$/.test('路路'));// true
// console.log(/^路{2,}$/.test('路路路')); // true
// {n,m} 放在它前面的字符 最少出现n次，最大是m次
console.log(/^路{0,2}$/.test('')); // true
console.log(/^路{0,2}$/.test('路')); // true
console.log(/^路{0,2}$/.test('路路')); // true
console.log(/^路{0,2}$/.test('路路路')); // false
</script>
</body>
字符类
<body>
<script>
// . 表示除了（换行符之外）任意字符
// console.log(/路/.test('飞')); // false
// console.log(/./.test('飞')); // true
// console.log(/路.飞/.test('路大飞')); // true
// console.log(/路.飞/.test('路小飞')); // true
// console.log(/路.飞/.test('路中飞')); // true
// console.log(/路.飞/.test('路不飞')); // true
// console.log(/路.飞/.test('路飞')); // false
// console.log(/路.飞/.test('路 飞')); // false
// \d 表示数字
// console.log(/\d/.test("路飞"));// false
// console.log(/\d/.test("1路飞"));// true
// console.log(/\d/.test("路3飞"));// true
// \D 不是数字之外的任意1个字符
// console.log(/\D/.test("123"));// false
// console.log(/\D/.test("12a3"));// true
// console.log(/\D/.test("12a3"));// true
// \w 字母、数字、下划线
// console.log(/\w/.test("123"));// true
// console.log(/\w/.test("%%"));// false
// console.log(/\w/.test("%1%"));// true
// console.log(/\w/.test("%a%"));// true
// console.log(/\w/.test("%_%"));// true
// \W 除去了 字母 、数字、下划线 之外字符
// console.log(/\W/.test("123"));// false
// console.log(/\W/.test("1%23"));// true
// \s 匹配空格
// console.log(/\s/.test("123"));// false
// console.log(/\s/.test("1 23"));// true
// \S 除了空格之外的字符
// console.log(/\S/.test('123'));// true
// console.log(/\S/.test(' '));// false
// console.log(/\S/.test(' '));// false
// [ab] => 可以匹配 a 或者 b
// console.log(/[ab]/.test('a'));// true
// console.log(/[ab]/.test('b'));// true
// console.log(/[abc]/.test('c'));// true
// 表示 a-z 任意的一个字母
// console.log(/[a-z]/.test('c'));// true
// console.log(/[a-z]/.test('d'));// true
// console.log(/[a-z]/.test('123'));// false
// console.log(/[a-d]/.test('a'));// true
// console.log(/[a-d]/.test('g'));// false
// 0-9 任意的一个数字
// console.log( /[0-9]/.test("1") );// true
// console.log( /[0-9]/.test("2") );// true
// console.log( /[0-9]/.test("0") );// true
// A-Z
// console.log(/[A-Z]/.test("a"));// false
// console.log(/[A-Z]/.test("B"));// true
// 同时满足 0-9a-zA-Z
console.log(/[0-9a-zA-Z]/.test('1'));// true
console.log(/[0-9a-zA-Z]/.test('a'));// true
console.log(/[0-9a-zA-Z]/.test('A'));// true
console.log(/[0-9a-zA-Z]/.test(' '));// false
</script>
</body>
