当前位置：首页 > 行业动态 > 正文

html5时间存储

admin
行业动态
2025-05-12
6

HTML5 提供 Web Storage 和 IndexedDB，支持存储时间数据，结合 JS 处理时间戳或 Date 对象实现

HTML5 时间存储详解

本地存储（LocalStorage/SessionStorage）与时间处理

HTML5 的 localStorage 和 sessionStorage 是键值对存储机制，常用于保存时间戳或时间相关数据。

存储时间戳

// 保存当前时间戳（毫秒）
localStorage.setItem('visitTime', Date.now());
// 读取并格式化时间
const time = parseInt(localStorage.getItem('visitTime'));
const date = new Date(time);
console.log(date.toLocaleString()); // 输出可读时间

计算时间差

// 保存开始时间
localStorage.setItem('startTime', Date.now());
// 稍后计算耗时
const start = parseInt(localStorage.getItem('startTime'));
const duration = Date.now() start;
console.log(`耗时：${duration} 毫秒`);

IndexedDB 与时间序列数据

IndexedDB 适合存储大量时间序列数据（如日志、定时记录）。

html5时间存储第1张

示例：存储访问记录

// 打开数据库
const db = new IndexedDB('timeDB', 1, (event) => {
  const objStore = event.target.result.createObjectStore('records');
  objStore.createIndex('time', 'time', { unique: false });
});
// 添加记录
function addRecord(data) {
  const transaction = db.transaction(['records'], 'readwrite');
  const store = transaction.objectStore('records');
  store.add({ time: Date.now(), data });
}

Cookie 与过期时间

Cookie 可通过 Expires 或 Max-Age 属性设置过期时间。

示例：设置 1 小时过期的 Cookie

const expires = new Date();
expires.setTime(expires.getTime() + 60  60  1000); // 当前时间 + 1 小时
document.cookie = `visitTime=${Date.now()}; Expires=${expires.toUTCString()}`;

时间相关 API 与存储结合

setTimeout / setInterval
配合存储实现延迟操作或周期性任务。

// 5 秒后保存数据
setTimeout(() => {
  localStorage.setItem('delayedData', 'value');
}, 5000);

Service Worker 定时同步
通过 setInterval 在后台定期同步时间敏感数据。

self.addEventListener('install', (event) => {
  event.waitUntil(self.registerPush([])); // 示例：推送通知
});
// 每分钟检查一次更新
setInterval(() => {
  // 假设从服务器获取时间数据
  fetch('/time-sync').then(response => response.json()).then(data => {
    localStorage.setItem('serverTime', data.time);
  });
}, 60000); // 60秒

存储方式对比

存储类型	持久性	容量	适用场景
`localStorage`	长期	约 5MB	长期保存时间戳、用户首次访问时间
`sessionStorage`	会话	约 5MB	临时记录单次访问的耗时
`IndexedDB`	长期	约 500MB	存储大量时间序列数据（如日志）
`Cookie`	可设置	约 4KB	带过期时间的短时间标记