Window对象和本地存储

var name = 10
console.log(window.name) // 10

// 2秒后执行一次
setTimeout(function () {
  console.log('时间到了')
}, 2000)


// 特殊情况下，timer = 定时器数字
let timer = setTimeout(function () {
  console.log('时间到了')
}, 2000)
// 清除延时函数(特殊情况)
clearTimeout(timer)

// 1. 获取图片
const img = document.querySelector('img')
// 2. 延时定时器5秒后隐藏
setTimeout(function () {
  img.style.display = 'none'
}, 5000)

// 获取当前的url地址
console.log(location.href)

// 1. 经常用href 利用js的方法去跳转页面
location.href = 'http://wwww.baidu.com'

console.log(location.search) 
// ?username=wqeq&pwd=1231

console.log(location.hash) // #/my

const button = document.querySelector('button')
button.addEventListener('click', function () {
  // F5 强制刷新 
  location.reload()

  // ctrl + F5 强制刷新 
  location.reload(true)
})

const a = document.querySelector('a')
//开启定时器
// 声明倒计时变量
let num = 5
let timerId = setInterval(function () {
  num--
  a.innerHTML = `支付成功<span>${num}</span>秒钟之后跳转到首页`
  // 如果 num === 0 则停止定时器，并完成跳转功能
  if (num === 0) {
    clearInterval(timerId)
    // 跳转到首页
    location.href = 'https://www.bigengwu.cn/'
  }
}, 1000)

// 检测 userAgent（浏览器信息）
!(function () {
  const userAgent = navigator.userAgent
  // 验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
  const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
  // 如果是Android或iPhone，则跳转至移动站点
  if (android || iphone) {
    location.href = 'http://m.itcast.cn'
  }
})();

!(function () { })();
!function () { }();
+function () { }();

// 获取 button 第一个元素
const back = document.querySelector('button:first-child')
// 获取下一个兄弟
const forward = back.nextElementSibling

back.addEventListener('click', function () {
  // 后退一步
  // history.back() //第一种
  history.go(-1) // 第二种
})

forward.addEventListener('click', function () {
  // 前进一步
  // history.forward() // 第一种
  history.go(1) // 第二种
})

// 1. 存储一个名字 setItem('键', '值')
localStorage.setItem('uname', '霍欣标')

// 2. 获取一个名字
localStorage.getItem('uname')

// 3. 删除本地存储  只删除一个名字
localStorage.removeItem('uname')

// 4. 改 已有键则修改，未有键则新增
localStorage.setItem('uname', '霍霍')

localStorage.setItem('age', 18)
console.log(localStorage.getItem('uname')) // 字符串

sessionStorage.setItem('uname', '小霍')

const obj = {
  uname: '霍欣标',
  age: 18,
  gender: '男'
}

// 1. 存储：复杂数据转换为JSON字符串(键, 值(JSON字符串))
localStorage.setItem('obj', JSON.stringify(obj))
// 2. 获取：JSON字符串转换为对象
const str = JSON.parse(localStorage.getItem('obj'))
console.log(str)

const arr = [1, 2, 3]
const str = '霍欣标'
// 遍历数组
arr.map(function (item) {
  console.log(item)
  // 1
  // 2
  // 3
})

const arr = ['red', 'blue', 'pink']
// 1. 数组map方法
const newArr = arr.map(function (ele, index) {
  // console.log(ele)   //数组元素
  // console.log(index) // 数组索引号
  return ele + '颜色'
})
console.log(newArr) // ['red颜色', 'blue颜色', 'pink颜色']

// 2. 数组join方法，把数组转换为字符串
// 小括号为空则逗号分割
console.log(newArr.join()) // red颜色,blue颜色,pink颜色
// 小括号是空字符串，则元素之间没有分隔符
console.log(newArr.join('')) //red颜色blue颜色pink颜色
console.log(newArr.join('|')) // red颜色|blue颜色|pink颜色

// 参考数据
const initData = [
  {
    stuId: 1001,
    uname: '欧阳霸天',
    age: 19,
    gender: '男',
    salary: '20000',
    city: '上海',
    time: '2024/9/9 08:08:08'
  }
]
// 存储到本地存储     (键名，转为JSON字符串(值))
// localStorage.setItem('data', JSON.stringify(initData))

// 模块一  渲染业务
// 1. 读取本地存储数据，将JSON字符串转换为数组对象  ||如果没有数据，则用空数组来代替
const arr = JSON.parse(localStorage.getItem('data')) || []
// console.log(arr)

// 2. 利用map和join方法来渲染页面
const tbody = document.querySelector('tbody')
function render() {
  // 2.1 map遍历数组，返回对应tr的数组
  const trArr = arr.map(function (ele, index) {
    return `
       <tr>
          <td>${ele.stuId}</td>
          <td>${ele.uname}</td>
          <td>${ele.age}</td>
          <td>${ele.gender}</td>
          <td>${ele.salary}</td>
          <td>${ele.city}</td>
          <td>${ele.time}</td>
          <td>
            <a href="javascript:" data-id = "${index}">
             <i class = "iconfont icon-shanchu"></i>
             删除
            </a>
          </td>
        </tr>
    `
  })
  console.log(trArr)
  // 2.2 把数组转换为字符串join
  // 2.3 把生成的字符串追加给tbody
  tbody.innerHTML = trArr.join('')
  // 2.4 显示共有几条数据
  document.querySelector('.title span').innerHTML = arr.length
}
render()

// 模块二  新增数据渲染业务
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const salary = document.querySelector('.salary')
const gender = document.querySelector('.gender')
const city = document.querySelector('.city')

// 1. 添加注册事件
info.addEventListener('submit', function (e) {
  //1.1 阻止默认行为
  e.preventDefault()
  // 2. 非空判断
  if (!uname.value || !age.value || !salary.value) {
    return alert('输入内容不能为空')
  }
  // 3. 给arr数组追加对象，里面存储 表单获取过来的数据
  // 处理 stuId：，数组最后一条数据的 stuId + 1
  arr.push({
    stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
    uname: uname.value,
    age: age.value,
    gender: gender.value,
    salary: salary.value,
    city: city.value,
    time: new Date().toLocaleString()
  })
  // 4 渲染页面重置表单
  render()
  // 4.1 重置表单
  this.reset()
  // 5.把数组重新存入本地存储里面，记得转换为JSON字符中存储
  localStorage.setItem('data', JSON.stringify(arr))
})

// 模块三 删除事件
// 1. 采用事件委托形式，给 tbody 注册点击事件
tbody.addEventListener('click', function (e) {
  // 2. 判断是否点击的是删除按钮
  if (e.target.tagName === 'A') {
    // 2.1 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定火属性例如 data - id="e"
    // console.log(e.target.dataset.id)
    // 确认是否真的删除吗？确认框
    if (confirm('您确定要删除这条数据吗？')) {
      // 3. 根据索引号，利用删除数组这条数据
      arr.splice(e.target.dataset.id, 1)
      // 4. 重新渲染页面
      render()
      // 5. 把最新的数组arr存到本地存储
      localStorage.setItem('data', JSON.stringify(arr))
    }
  }
})