大厂前端面试常问h5三大特性（Web 存储、Web Workers、WebSocket）

Web 存储

h5 新增的本地存储方式——localStorage、sessionStorage，以前是 cookie

• localStorage

  • 以键值对的形式存储，永久保存，除非自行删除，所以使用时记得根据情况安排删除语句

  • // 用法
    let storage = localStorage
    storage.setItem("a", "mike") // 存储键名为a，键值为mike的数据到本地
    storage.getItem("a") // 获取a对应数据
    storage.remove("a") // 删除a对应数据
    storage.clear() // 清空所有存储数据
    

• sessionStorage

  • 临时存储，窗口或页面关闭自动删除
  • 用法同 localStorage，可以说这两个除了有效期不同其他基本一致

• 作用域：相同协议、主机名、端口情况下，就可以读取/修改到同一份localStorage数据，而sessionStorage还要求是同一窗口

• 比 cookie 更好的地方

  • 存储空间更大（5M，每个网站），cookie 限制为 4k
  • 不必上传到服务器
  • 同原页面都可以获取
  • 存取方式更直接

Web Worker（实现多线程）

首先得知道，js 是单线程的，虽然可以用 ajax、setTimeout()等手段模拟并行，但那不是真的并行。

而 Web Worker 就是用来解决这个问题的，它允许主线程之外还存在一个线程

// 用法
// 额外写好一个demo.js文件，这里面就是装着额外线程要运行的东西
let w = new Worker("http://~demo.js") // 强调！！！必须引用网络上的文件
w.onmessage = function (e) {...} // 监听Worker返回的信息，即e.data
w.onerror = e => {...} // 监听错误
w.terminate() // 关闭Worker线程

• 关键点
  • 分配给 Worker 线程的脚本文件必须和主线程的脚本文件同源
  • Worker 不能读取本地文件（file://~），文件必须来自网络
• 由于 web worker 处于外部文件中，所以无法访问到 winodow、document、parent 对象
• 想了解更深入可以查看Web Worker

WebSocket

引言：以前只能由客户端发送ajax请求与服务器通讯，这样不便于实时获取服务器变化，而该技术的出现使得前后端可以双向通讯，提高了通信效率

• WebSocket 是 H5 提供的一种基于 TCP 协议进行全双工通讯的协议（应用层）

• 一次 TCP 握手，即可建立永久连接，并可双向传输数据

• // 用法
  let socket = new WebSocket(url, [protocol]) // protocol，可接受的子协议
  // 属性
  // 0：连接未建立 1：已建立 2：正在关闭 3：已经关闭或打开失败
  Socket.readyState
  Socket.bufferedAmount // 表示还有多少字节的二进制数据没有发送出去
  // 事件，绑定时加on，例如Socket.onopen()
  open // 连接建立时触发
  message // 客户端接收到服务端数据时触发
  error // 通信发生问题时触发
  close // 连接关闭时触发
  // 方法
  Socket.send() // 使用连接发送数据
  Socket.close() // 关闭连接
  

• 想了解更深入可以查看WebSocket

如果觉得对你有帮助的话，点个赞呗~

反正发文又不赚钱，交个朋友呗~

如需转载，请注明出处foolBirdd