4月25日 web学习笔记

一、WebAPIs 与浏览器功能
Web Storage API
localStorage：持久化存储。
sessionStorage：会话存储。
示例：
JavaScript

// 存储数据
localStorage.setItem('username', '张三');
sessionStorage.setItem('sessionToken', 'abc123');

// 获取数据
const username = localStorage.getItem('username');
const sessionToken = sessionStorage.getItem('sessionToken');

// 删除数据
localStorage.removeItem('username');
sessionStorage.clear();
IndexedDB
定义：浏览器的低级 API，用于存储大量结构化数据。
示例：
JavaScript

// 打开数据库
const request = indexedDB.open('myDB', 1);

request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
const db = event.target.result;

// 添加数据
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: '张三', email: 'zhangsan@example.com' });

// 查询数据
const getRequest = store.get(1);
getRequest.onsuccess = function() {
    console.log(getRequest.result);
};

};
Fetch API
定义：用于网络请求。
示例：
JavaScript

// GET 请求
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('网络响应错误');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('错误:', error));

// POST 请求
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('错误:', error));
WebSockets
定义：实现实时双向通信。
示例：
JavaScript

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function(event) {
console.log('连接已打开');
socket.send('Hello Server!');
};

socket.onmessage = function(event) {
console.log('收到消息:', event.data);
};

socket.onclose = function(event) {
console.log('连接已关闭');
};

socket.onerror = function(error) {
console.error('WebSocket 错误:', error);
};
Web Workers
定义：在后台线程中运行脚本。
示例：
JavaScript

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
console.log('从 Worker 收到消息:', event.data);
};

worker.postMessage('开始计算');

// worker.js
self.onmessage = function(event) {
console.log('收到消息:', event.data);

// 模拟耗时计算
let result = 0;
for (let i = 0; i < 1000000000; i++) {
    result += i;
}

self.postMessage(result);

};
二、现代框架与库（Vue.js）
Vue.js 基础
安装：
bash

npm install vue
示例：
HTML

{{ message }}

计数: {{ count }}

Vue Router
安装：
bash

npm install vue-router
示例：
JavaScript

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];

const router = createRouter({
history: createWebHistory(),
routes,
});

export default router;
Vuex（状态管理）
安装：
bash

npm install vuex
示例：
JavaScript

import { createStore } from 'vuex';

export default createStore({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
},
},
getters: {
doubleCount(state) {
return state.count * 2;
},
},
});
Composition API
示例：
JavaScript

import { ref, computed } from 'vue';

export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);

    const increment = () => {
        count.value++;
    };

    return { count, doubleCount, increment };
},

};
三、实战练习
Web Workers 实践
创建一个使用 Web Workers 进行复杂计算的 Web 应用。
在主线程中显示计算进度。
Vue.js 应用
创建一个 Vue.js 项目，使用 Vue Router 和 Vuex。
实现一个待办事项应用，支持添加、删除和标记完成。
IndexedDB 实践
使用 IndexedDB 存储用户数据。
实现数据的增删改查。