前言一、js组成window对象定时器-延迟函数location对象navigator对象histroy对象

、本地存储今日重点localStorage重点localStorage

存储复杂数据类型数组map

规定了js基础语法核心知识。

比如变量、分支语句、循环语句、对象等等

Web

window对象是一个全局对象也可以说是JavaScript中的顶级对象像document、alert()、console.log()这些都是window的属性基本BOM的属性和方法都是window的所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法window对象下的属性和方法调用的时候可以省略window

定时器-延迟函数

延时函数需要等待,所以后面的代码先执行返回值是一个正整数表示定时器的编号

bodyscript//

延迟函数返回的还是一个正整数数字表示延迟函数的编号console.log(timerId)//

1.2

关闭延迟函数clearTimeout(timerId)/script

/bodylocation对象

地址赋值时用于地址的跳转search属性获取地址中携带的参数符号

true

得到完整地址赋值则是跳转到新地址console.log(location.href)//

location.href

后面的地址console.log(location.hash)//

reload

document.querySelector(.reload)btn.addEventListener(click,

function

userAgent.match(/(Android);?[\s\/]([\d.])?/)const

iphone

userAgent.match(/(iPhone\sOS)\s([\d_])/)//

(android

http://m.itcast.cn}})();histroy对象

history

document.querySelector(.forward)forward.addEventListener(click,

function

document.querySelector(.back)back.addEventListener(click,

function

history.back()history.go(-1)})/script

/body

数据可以长期保留在本地浏览器中刷新页面和关闭页面数据也不会丢失

存储sessionStorage.setItem(key,value)

删除sessionStorage.removeItem(key)

localStorage

console.log(localStorage.getItem(goods))//

把对象转换为JSON字符串

JSON.stringifylocalStorage.setItem(goods,

console.log(typeof

localStorage.getItem(goods))/script

/body取

console.log(localStorage.getItem(goods))//

把对象转换为JSON字符串

JSON.stringifylocalStorage.setItem(goods,

console.log(typeof

JSON.parseconsole.log(JSON.parse(localStorage.getItem(goods)))/script

/body数组map

也称为映射。

映射是个术语指两个元素的集之间元素相互“对应”的关系。

map重点在于有返回值forEach没有返回值undefined

数组join方法

小括号为空则逗号分割console.log(newArr.join())

小括号是空字符串则元素之间没有分隔符console.log(newArr.join())

//red颜色blue颜色pink颜色console.log(newArr.join(|))

/body二、案例举例

document.querySelector(.uname)const

age

document.querySelector(.age)const

gender

document.querySelector(.gender)const

salary

document.querySelector(.salary)const

city

document.querySelector(.city)const

info

document.querySelector(.info)const

items

document.querySelectorAll([name])let

arr

[]//form提交事件数据更新渲染函数info.addEventListener(submit,

function

{//阻止默认行为e.preventDefault()//判断内容是否为空for

(let

city.value,}arr.push(data)localStorage.setItem(data,

JSON.stringify(arr))//新数据渲染到下面表格render()//清空text填写原有数据this.reset()})function

render()

//arr.map(function)(e,index){})return

trtd${e.stuId}/tdtd${e.uname}/tdtd${e.age}/tdtd${e.gender}/tdtd${e.salary}/tdtd${e.city}/tdtda

hrefjavascript:

new_data.join();}//del删除事件借助自定义属性const

tbody

document.querySelector(tbody)tbody.addEventListener(click,

function

{arr.splice(e.target.dataset.id,

//arr

render里面的new_data是添加在tbody里面localStorage.removeItem(data,

JSON.stringify(arr[e.target.dataset.id]))render()localStorage.setItem(data,