JS学习笔记——window和本地存储

window对象

BOM

• BOM是浏览器对象模型

定时器——延时函数

• 延时函数语法：
  setTimeout(回调函数，等待的毫秒数)
• 清除延时函数：
  let timer = setTimeout(回调函数，等待的毫秒数)
  clearTimeout(timer)
  • 延时需要等待，所以后面的代码先执行
  • 每一次调用延时器都会产生一个新的延时器
• 两种定时器对比：执行的次数
  • 延时函数：执行一次
  • 间歇函数：每隔一段时间就执行一次，除非手动清除

JS执行机制

• 同步
  • 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。、
  • 同步任务都在主线程上执行，形成一个执行栈
• 异步
  • 在做一件事时，因为这件事会花费很长时间，在做这件事的同时，还可以去处理其他的事情
  • JS的异步是通过回调函数来实现的，一般有以下三种类型：
    • 普通事件，如click、resize等
    • 资源加载，如load、error等
    • 定时器，包括setInterval、setTmeout等
• 执行机制
  1. 先执行执行栈中的同步任务
  2. 异步任务放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
• 事件循环
  由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环

location对象

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

• 常用属性和方法
  • href属性获取完整的URL地址，对其赋值时用于地址的跳转
  • search属性获取地址中携带的参数，符号？后面部分
  • hash属性获取地址中的哈希值，符号#后面部分
  • reload方法用来刷新当前页面，出入参数true时表示强制刷新
  • pothname属性获取或设置URL的路径部分

navigator对象

navigator的数据类型是对象，该对象记录了浏览器自身的相关信息

• 常用属性和方法
  • 通过userAgent检测浏览器的版本及平台

history对象

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

• 常用属性和方法
  back（）：后退功能
  forward（）：前进功能
  go（参数）：前进后退功能，参数是1则前进一个页面，是-1则后退一个页面

本地存储

本地存储分类

localStorage

• 作用：可以将数据永久存储在本地。除非手动删除，否则关闭页面也会存在
• 特性：
  • 可以多窗口共享（同一浏览器可以共享）
  • 以键值对的形式存储使用
• 语法：
  存储数据：
  localStorage.setItem(key,value)
  获取数据：
  localStorage.getItem(key)
  删除数据：
  localStorage.removeItem(key)
• 查看本地数据
  f12——Application——localStorage

sessionStorage

• 特性：
  • 生命周期为关闭浏览器窗口
  • 在同一个窗口（页面）下数据可以共享
  • 以键值对的形式存储使用
  • 用法跟localStorage基本相同

存储复杂数据类型

存储

• 问题：本地只能存储字符串，无法存储复杂数据类型
• 解决：需要将复杂数据类型转换成JSON字符串，再存储到本地
• 语法：
  JSON.stringify(复杂数据类型)

取出

• 问题：因为本地存储里面取出的是字符串，不是对象，无法直接使用
• 解决：把取出的字符串转换成对象
• 语法：
  JSON.parse(JSON字符串)

数组方法

map

• 作用：map 迭代数组
• 语法：
  arr.map(function(item,index){
  console.log(item)
  //item得到数组元素
  console.log(index)
  //index得到索引号
  })
• 使用场景：
  map可以处理数据，并且返回新的数组

join

• 作用：
  join()方法用于把数组中的所有元素转换一个字符串

• 语法：
  const arr = [‘小黄’，‘小明’，‘小红’]
  console.log(arr.join(‘’))
  //小黄小明小红

• 参数：
  数组元素是通过参数里面指定的分隔符进行分隔的