Web API Cookbook

本文整体结构参考了 Web API Cookbook (opens in a new tab)。

localStorage

Local storage

web-api-cookbook:*

已存储的演示项 · 0

还没有保存数据

演示数据会保存在当前站点的 localStorage 中。

读写、删除与清空

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");

const profile = { name: "John", gender: "Male" };
localStorage.setItem("profile", JSON.stringify(profile));
const savedProfile = JSON.parse(localStorage.getItem("profile"));

localStorage.removeItem("theme");
localStorage.clear();

监听变化

// 同源下的另一个页面修改 localStorage 时触发。
window.addEventListener("storage", ({ key, oldValue, newValue }) => {
  console.log({ key, oldValue, newValue });
});

枚举 key

const keys = Array.from(
  { length: localStorage.length },
  (_, index) => localStorage.key(index)
);

设备

电池信息

navigator.getBattery().then((battery) => {
  console.log(`${battery.level * 100}%`);
  console.log(battery.charging ? "Charging" : "Not charging");
});

网络信息

console.log(navigator.connection.effectiveType)

设备位置

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
  },
  (error) => {
    // Either the user denied permission, or the device location could not
    // be determined.
    console.log(error);
  },
);

音视频

录屏

选择要分享的屏幕后，预览会显示在这里

正在检查浏览器支持……

录制内容仅在本地处理，不会上传。

const stream = await navigator.mediaDevices.getDisplayMedia();
const recorder = new MediaRecorder(stream);
const chunks = [];

recorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    chunks.push(event.data);
  }
};

recorder.onstop = () => {
  const blob = new Blob(chunks, { type: recorder.mimeType });
  const url = URL.createObjectURL(blob);

  stream.getTracks().forEach((track) => track.stop());
};

recorder.start();
recorder.stop();

调用设备摄像头

允许权限后，摄像头画面会显示在这里

准备就绪

画面和声音仅在本地预览，不会上传。

const video = document.querySelector("#demo");

const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
});

video.srcObject = stream;
await video.play();

function stopCamera() {
  stream.getTracks().forEach((track) => track.stop());
  video.srcObject = null;
}