JavaScript应用（day05:Window对象、本地存储）_js 可以把window存在本地么-CSDN博客

本文链接：https://blog.csdn.net/weixin_51591826/article/details/135042845

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

一、Window对象

1.BOM（浏览器对象模型）

2.定时器-延时函数（setTimeout）

setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行

两种定时器对比：执行的次数

延时函数：执行一次

间歇函数：每隔一段时间就执行一次，除非手动清除

案例（5秒钟之后消失的广告）

  <img src="./images/ad.png" alt="">
  <script>
    setTimeout(function () {
      document.querySelector("img").style.display = "none"
    }, 2000)

3.JS执行机制

js是单线程，同一个时间只能做一件事；为了解决这个问题，提出了同步任务、异步任务

同步任务、异步任务

事件循坏（event loop）

主线程不断的重复获得任务、执行任务、再获取任务、再执行的机制被称为事件循环

4.location对象

href

案例（5秒钟之后跳转的页面）

<body>
  <a href="http://attackingbear.top">http://attackingbear.top5秒自动进行跳转</a>
  <script>
    // 获取元素
    const a = document.querySelector("a")
    let time = 5
    // 定义间歇定时器
    let timeId = setInterval(function () {
      time--
      a.innerHTML = `http://attackingbear.top${time}秒自动进行跳转`
      // 如果时间为0，停止定时器并进行跳转
      if (time === 0) {
        clearInterval(timeId)
        location.href = "http://attackingbear.top"
      }
    }, 1000)
  </script>
</body>

search(了解)

hash(了解)

reload

总结

5.navigator对象

记录浏览器自身的相关信息，可以通过这个属性来切换pc端和移动端

6.histroy对象

主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

二、本地存储

1.本地存储介绍

数据存储在用户浏览器中，页面刷新不丢失数据，容量较大，sessionStorage和localStorage约5M左右

2.本地存储分类

1.localStorage

本地存储只能存储字符串数据类型，以键值对的形式存储使用（键都要加引号，值都为字符串）

可以多窗口（页面）共享（同一浏览器可以共享），注意跨域问题

2.sessionStorage（了解）

总结

3.存储复杂数据类型

能够存储复杂数据类型以及取出数据

本地只能存储字符串，无法存储复杂数据类型

解决办法

1.先使用JSON.stringify（复杂数据类型）将复杂数据类型转换成JSON字符串存储在本地

2.再使用JSON.parse(JSON字符串)把取出来的字符串转换为对象

综合案例（学生就业统计表）

    // 获取元素
    const uname = 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 total = document.querySelector(".title span")
    const tbody = document.querySelector("tbody")
    // 把data对应的字符串转化成对象，如果data为空则设置为空数组
    let renderData = JSON.parse(localStorage.getItem("data")) || []
    // 渲染数据
    function render() {
      // 利用map遍历数组，返回对应的tr数组
      const trArr = renderData.map(function (ele, index) {
        return `
        <tr>
          <td>${ele.Id}</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}>删除</a>
          </td>
        </tr>`
      })
      tbody.innerHTML = trArr.join('')
      total.innerHTML = renderData.length
    }
    // 初始化渲染数据
    render()
    // 录入数据
    info.addEventListener("submit", function (e) {
      //阻止默认行为，不跳转
      e.preventDefault()
      renderData.push({
        Id: renderData.length ? renderData[renderData.length - 1].Id + 1 : 1001,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
        time: new Date().toLocaleString()
      })
      render()
      // 表单重置
      this.reset()
      // 把复杂数据类型转为JSON字符串进行本地存储
      localStorage.setItem("data", JSON.stringify(renderData))
    })
    // 删除数据
    // 使用事件委托
    tbody.addEventListener("click", function (e) {
      if (e.target.tagName === "A") {
        if (confirm("您确认要删除这条数据吗？"))
          renderData.splice(e.target.dataset.id, 1)
        localStorage.setItem("data", JSON.stringify(renderData))
        render()
      }
    })