本地存储
localStorage
- 关闭浏览器不会消失
- 以键值对的形式存储
存储数据
localStorage.setItem(key,value)
//键值对
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
右键——在Application下查看
例:
//1、要存储一个名字'uname','pink'
//localStorage.setItem('键','值')
localStorage.setItem('uname','pink')
//2.获取方式 都加引号
console.log(localStorage.getItem('uname'))
//3、删除本地数据 只删除名字
localStorage.removeItem('uname')
//4、改 直接覆盖
localStorage.setItem('uname','red')
注:本地存储只能存储字符串数据类型,无法存储复杂数据类型
localStorage.setItem('age',18)
console.log(localStorage.getItem('age'))//得到的 18 是字符串
存储复杂数据类型
转换成JSON
字符串
const obj = {
uname:'pink'
}
//1、复杂数据类型存储必须转换为JSON字符串存储
localStorage.setItem('obj',JSON.stringify(obj))
//JSON字符串,属性和值都有双引号
//{"uname":"pink"}
//2、把JSON字符串转换为对象 用parse
console.log(JSON.parse(localStorage.getItem('obj')))
sessionStorage
- 关闭浏览器即消失
- 在同一个窗口下数据可以共享
- 以键值对的形式存储使用
- 用法和
localStorage
基本相同
数组中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
没有返回值
数组中join方法
作用:join()方法用于把数组中所有元素转换一个字符串
//小括号为空则逗号分割
console.log(newArr.join())
//red颜色,blue颜色,green颜色
//小括号是空字符串,则元素之间没有分隔符
console.log(newArr.join(''))
//red颜色blue颜色green颜色
console.log(newArr.join('|'))
//red颜色|blue颜色|green颜色
数组中map+join方法渲染页面
思路:
- map遍历数组处理数据生成tr,返回一个数组
- 用join(‘’)把数组转换为字符串
- 追加给
tbody
详见网课P134
正则表达式
- 用于匹配字符串中字符组合的模式
- 通常用来查找、替换那些符合正则表达式的文本。
- 使用场景:验证表单只能输入字母等;过滤掉页面内容中的敏感词汇、从字符串中提取想要的部分
语法:
//1、定义正则表达式语法
const 变量名 = /表达式/
//2、是否匹配 text()方法
变量名.text(需要测试的字符串)
//返回false 或 true
其中/ /
是正则表达式字面量,不需要引号,些什么,查什么
例:
const str='我们在学习前端,希望学习前端能高新毕业'
//1、定义规则
const reg = /前端/
//2、检测方法
reg.text(str)
exec()方法 在一个指定字符串中执行一个搜索匹配
regObj.exec(被检测字符串)
//要检测的字符串
const str='我们在学习前端,希望学习前端能高新毕业'
//1、定义规则
const reg = /前端/
//2、检测方法
console.log(reg.exec(str))//如果匹配成功,返回是数组,否则返回null
元字符
- 普通字符:仅能描述其自身,例如字母数字,只能够匹配字符串中与他们相同的字符。
- 元字符(特殊字符):一些具有特殊含义的字符,比如26个英文字母写成元字符为[a-z]
正则测试工具:http://tool.oschina.net/regex
边界符
表示位置,开头和结尾,必须用什么开头,用什么结尾
边界符 | 说明 |
---|---|
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
const reg = /^前端/
//表示以前端两个字开头,否则false
console.log(/^哈$/.text('哈哈'))//false
//里面只能出现一个,精确匹配
量词
表示重复次数
console.log(/^哈$/.text('哈哈'))
字符类
比如\d
表示0~9
console.log(/^哈$/.text('哈哈'))
[外链图片转存中…(img-qKSAkBa5-1685252113386)]
[外链图片转存中…(img-KE56Ejnm-1685252113387)]
字符类
比如\d
表示0~9
[外链图片转存中…(img-vgVB0hDZ-1685252113388)]