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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值