本文介绍了HTML5中的本地存储技术，包括localStorage和sessionStorage的区别与使用，以及如何存储和处理复杂数据类型。此外，还详细讲解了数组的map和join方法，以及正则表达式的语法、元字符、边界符、量词和字符类，以及修饰符的使用。
目录
1. 本地存储
1.1 本地存储介绍
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案
1.数据存储在用户浏览器中
2.设置，读取方便，甚至页面刷新不丢失数据
3.容量较大，sessionStorage和LocalStorage约5M左右
1.2 本地存储分类-localStorage
目标：能够使用localStorage把数据存储在浏览器中
作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
特征：
可以多个窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用
数据可以在浏览器检查中的application下的local Storage下
本地存储只能存储字符串
所有的键和值都要加‘’
语法：
存储数据和改数据：
localStorage.setItem(key,value)
获取数据：
localStorage.getItem(key)
删除数据：
localStorage.removeItem(key)
1.3 本地存储分类-sessionStorage
特征：
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage基本相同
1.4存储复杂数据类型
目标：能够存储复杂数据类型以及取出数据
本地只能存储字符串，无法存储复杂数据类型
解决：需要将复杂数据类型转换成JSON字符串，在存储到本地
语法：JSON.stringify（复杂数据类型）
JSON对象 属性和值有引号，而是引号统一是双引号
解决： 把取出来的字符串转换为对象
语法：JSON.parse（JSON字符串）
2 map和join数组方法
2.1 数组中map方法 迭代数值
字符串拼接新思路：（效果更高，开发常用的写法）
利用map()和join()数值方法实现字符串拼接
数组中map方法 迭代数值
使用场景：
map可以遍历数组处理数据，并且返回新的数组。
const arr = ['red','blue','green']
const newArr = arr.map(function(ele,index) {
console.log(ele) //数组元素
console.log(index) // 数值索引号
return ele + '颜色'
})
console.log(newArr) // ['red颜色'，'blue颜色'，'green颜色']
map也称为映射。映射是一个术语，指两个元素的集之间元素相互"对应"的关系。
map重点在于有返回值，forEach没有返回值
2.2 数组中join方法
作用：
join（）方法用于把数组中所有元素转换成一个字符串
语法：
const arr = ['red颜色','blue颜色','green颜色']
console.log(arr.join('')) // red颜色blue颜色green颜色
参数：
数值元素是通过参数里面指定的分隔符进行分隔的，空字符串(''),则所有元素之间都没有任何字符，小括号为空使用，分隔
this.reset()可以重置表单内容
3. 正则表达式
正则表达式是用于匹配字符串中字符串组合的模式。在js中，正则表达式也是对象
通常用来查找，替换那些符合正则表达式的文本，许多语言都支持正则表达式
3.1 语法
正则表达式分为两步：
1.定义正则表达式语法：
const 变量名 = /表达式/
其中//是正则表达式字面量
2.判断是否有符合规则的字符串
test（）方法 用来查看正则表达式与指定字符串是否匹配
语法：
regObj.test(被检测的字符串)
匹配返回true ，不匹配返回false
3.检索（查找）符合规矩的字符串
exec（）方法在一个指定字符串中执行一个搜索匹配
语法：
regObj.exec（被检测字符串）
如果匹配成功，exec（）方法返回一个数组，否则返回null
3.2 元字符（特殊字符）
是一些具有特殊含有的字符，可以极大提高了灵活性和强大的匹配功能。
3.2.1 边界符
正则表达式中的边界符（位置符）是用来提示字符所处的位置，主要有两个字符
| 边界符 | 说明 |
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
/^哈$/ 以^开头以$结尾是精确匹配，必须完全符合里面的内容
3.3.2 量词
量词用来设定某个模式出现的次数
| 量词 | 说明 |
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复零次或一次 |
| {n} | 重复n次 |
| {n，} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
逗号左右两侧不能出现空格
3.3.3 字符类
（1）[] 匹配字符集合
后面的字符串只要包含[]中任意一个字符，都返回true（只能选择一个）
(2) []里面加上-连字符
使用连字符 - 表示一个方位
比如
[a-z]表示a到z26个英文字母都可以
[a-zA-Z]表示大小写都可以
[0-9]表示0~9的数字都可以
（3）预定义
| 预定类 | 说明 |
| \d | 匹配0-9之间的任一数字，相当于[0-9] |
| \D | 匹配所以0-9以外的字符，相当于[^0-9] |
| \w | 匹配任意的字母，下划线，数字，相当于[A-Za-z0-9_] |
| \W | 除所以字母，数字和下划线以外的字符，相当于[^A-Za-z0-9_] |
| \s | 匹配空格（包括换行符，制表符，空格符）相当于[\t\r\n\v\f] |
| \S | 匹配所以非空格的字符，相当于[^\t\r\n\v\f] |
3.3 修饰符
修饰符约束正则执行的某些细节行为，如区分大小写，是否支持多行匹配等
语法：
/表达式/修饰符
i是单词ignore的缩写，正则匹配时字母不区分大小写
g是单词global的缩写，匹配所有满足正则表达式的结果
替换repalce
语法：
字符串.replace（/正则表达式/，'替换文本'）
扫一扫
989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
