web apis本地存储

本地存储

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)]