JS的学习6

1.本地存储

1. localStorage

• localStorage.setItem(key,value) 存储数据
• localStorage.getItem(key) 获取数据
• localStorage.removeItem(key) 删除指定数据
• localStorage.clear(）清除所有数据
• localStorage.length 获取存储长度
• localStorage.key(0) 通过索引获取key

1. sessionStorage

• sessionStorage.setItem(key,value) 存储数据
• sessionStorage.getItem(key) 获取数据
• sessionStorage.removeItem(key) 删除指定数据
• sessionStorage.clear(）清除所有数据
• sessionStorage.length 获取存储长度
• sessionStorage.key(0) 通过索引获取key

2.storage事件

window.addEventListener('storage', (event) => {
  console.log('数据变化:', event.key);          // 被修改的键
  console.log('旧值:', event.oldValue);         // 修改前的值
  console.log('新值:', event.newValue);         // 修改后的值
  console.log('触发页面URL:', event.url);        // 修改发生的页面地址
  console.log('被操作的存储对象：', event.storageArea)
});

3.移动端触屏事件

1. 触屏touch事件

• touchstart 手指触摸时触发
• touchmove 手指滑动时触发
• touchend 手指移开时触发
• touchcancel 触摸被意外中断时触发（如来电、弹窗等）

1. 事件对象

• touches 正在触摸屏幕的所有手指的一个列表
• targetTouches 正在触摸当前DOM元素上的手指的一个列表
• changedTouches 手指状态发生了改变，从无到有，从有到无

4.错误处理

1. 防止程序崩溃

• try{ 可能会出错的代码 throw new Error('自定义错误') } catch(error) { 捕获错误并处理 } finally { 无论是否出错都会执行（可以不写） }

1. error对象

• error.name 错误类型
• error.message 错误描述
• error.stack 调用栈 属性定位到问题在第几行第几列

1. 常见错误类型

5.错误处理事件

1. 全局处理window.onerror window.οnerrοr= function(message,source,lineno,colno,error){ }

• message :错误信息（字符串）
• source ：发生错误的脚本URL（字符串）
• lineno 错误发生的行号（数字）
• colno：错误发生的列号（数字）
• error：Error对象（包含堆栈跟踪等详细信息）

6.单线程

1. 特点

• 一次执行一个任务
• 代码按书写顺序执行
• 一个耗时任务会阻塞后续所有任务，页面渲染和用户交互会被冻结

1. 问题解决

• 异步非阻塞 回调函数，将函数作为参数进行传递，异步完成后执行
• web worker

1. web worker的限制

• 同源限制线程脚本必须与主线程脚本同源
• 文件限制worker无法读取本地文件（file://）
• 无法读取主线程上的DOM元素，无法使用document、window、parent这些对象
• 只能传递可序列化的数据（如数组、对象等），不能传递DOM或函数
• 不能直接通信需要使用postMessage和onMessage
• 不可以使用alert和confirm方法，但可以使用XMLHttpRequest对象发出AJAX请求，也可以使用定时器与延时器等API

1. API

• worker.onMessage:向worker的父级接收来自其worker的信息时，会在Worker对象上触发message事件
• worker.postMessage：向worker的内部作用域发送一个消息，消息可由任何Javascript对象组成
• worker.onerror:当worker出现运行中错误时，他的onerror事件处理函数会被调用。
• worker.terminate:立即终止worker

1. 常见使用方式

• 直接指定脚本new worker(aURL,options)
• 使用Blob URL创建

语法：

let blob = new Blob(数组,对象)

blob.size:返回Blob对象的字节长度

blob.type:返回Blob的MIME类型

注意：

使用new Blob的方法需要使用URL.createObjectURL(blob)创建一个临时的url对象，生成临时的js文件地址

思考

获取元素属性：style.setProperty('属性名'，'属性值')

• 一个参数时就只是获取元素的属性
• 两个参数时，第一个参数是获取到的属性，第二个参数是要修改的属性值