🌐 第十五章：现代浏览器 API

// 存储数据
localStorage.setItem('name', 'John');
localStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 }));

// 获取数据
const name = localStorage.getItem('name');
const user = JSON.parse(localStorage.getItem('user'));

// 删除数据
localStorage.removeItem('name');

// 清空所有数据
localStorage.clear();

// 存储数据
sessionStorage.setItem('token', 'abc123');

// 获取数据
const token = sessionStorage.getItem('token');

// 删除数据
sessionStorage.removeItem('token');

// 清空所有数据
sessionStorage.clear();

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

request.onupgradeneeded = function(event) {
    db = event.target.result;
    if (!db.objectStoreNames.contains('users')) {
        db.createObjectStore('users', { keyPath: 'id' });
    }
};

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

// 添加数据
function addUser() {
    const transaction = db.transaction(['users'], 'readwrite');
    const store = transaction.objectStore('users');
    const user = { id: 1, name: 'John', age: 30 };
    store.add(user);
}

// 基本动画
const element = document.querySelector('.box');

const animation = element.animate([
    { transform: 'scale(1)', opacity: 1 },
    { transform: 'scale(1.5)', opacity: 0.5 },
    { transform: 'scale(1)', opacity: 1 }
], {
    duration: 1000,
    iterations: 3,
    easing: 'ease-in-out'
});

// 控制动画
animation.pause();
animation.play();
animation.reverse();

// 监听动画结束
animation.addEventListener('finish', () => {
    console.log('Animation finished');
});

// 创建 Intersection Observer
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            // 元素进入视口
            entry.target.classList.add('visible');
        } else {
            // 元素离开视口
            entry.target.classList.remove('visible');
        }
    });
}, {
    threshold: 0.1 // 10% 可见时触发
});

// 观察元素
const elements = document.querySelectorAll('.section');
elements.forEach((element) => {
    observer.observe(element);
});

// 停止观察
// observer.unobserve(element);
// observer.disconnect();

// 创建 Resize Observer
const resizeObserver = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
        const { width, height } = entry.contentRect;
        console.log(`Element size: ${width}x${height}`);
    });
});

// 观察元素
const element = document.querySelector('.container');
resizeObserver.observe(element);

// 停止观察
// resizeObserver.unobserve(element);
// resizeObserver.disconnect();

// 获取地理位置
navigator.geolocation.getCurrentPosition(
    (position) => {
        const { latitude, longitude } = position.coords;
        console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
    },
    (error) => {
        console.error(error);
    }
);

// 复制文本到剪贴板
async function copyText(text) {
    try {
        await navigator.clipboard.writeText(text);
        console.log('Text copied to clipboard');
    } catch (err) {
        console.error('Failed to copy: ', err);
    }
}

// 从剪贴板读取文本
async function pasteText() {
    try {
        const text = await navigator.clipboard.readText();
        console.log('Pasted text:', text);
    } catch (err) {
        console.error('Failed to paste: ', err);
    }
}

// 请求通知权限
if ('Notification' in window) {
    Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
            showNotification();
        }
    });
}

// 显示通知
function showNotification() {
    new Notification('Hello', {
        body: 'This is a notification',
        icon: 'icon.png'
    });
}