正文

如何用JavaScript统计并刷新次数同时保留数据

/0 浏览量
0603

在 web 开发中，统计页面的访问次数是一种常见的需求。如果你需要用 JavaScript 实现这样的功能，同时希望即使页面刷新或关闭后仍能保留这些数据，可以考虑以下几种方法：

1. 使用 Cookies

Cookies 是浏览器用来存储小段文本数据的机制，可以被用于统计页面的访问次数。

设置和读取 Cookie

以下是一个使用 JavaScript 创建和读取 Cookie 的示例：

// 设置 Cookie
function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

// 读取 Cookie
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

// 统计并保存页面访问次数
var visits = parseInt(getCookie('page_visits')) || 0;
setCookie('page_visits', visits+1, 1); // 设置为保存一天

2. 使用 LocalStorage 或 IndexedDB

与 Cookies 不同，LocalStorage 和 IndexedDB 不会在浏览器关闭后被清除，这使得它们非常适合长期存储数据。

使用 LocalStorage

以下是如何使用 LocalStorage 统计并保存页面访问次数的示例：

// 使用 LocalStorage
if (localStorage.getItem('page_visits') === null) {
  localStorage.setItem('page_visits', 1);
} else {
  var visits = parseInt(localStorage.getItem('page_visits'), 10);
  localStorage.setItem('page_visits', visits + 1);
}

console.log("Page visits: " + localStorage.getItem('page_visits'));

使用 IndexedDB

虽然 IndexedDB 比较复杂，但是它提供了比 LocalStorage 更多的灵活性，并支持异步操作。

// 打开一个数据库
var db;

var openRequest = indexedDB.open('page_visits_db', 1);

openRequest.onupgradeneeded = function(e) {
  db = e.target.result;
  db.createObjectStore('page_visits', { keyPath: 'visits' });
};

openRequest.onerror = function(e) {
  console.error("Database error: " + e.target.error);
};

openRequest.onsuccess = function(e) {
  db = e.target.result;
  var transaction = db.transaction(['page_visits'], 'readwrite');
  var store = transaction.objectStore('page_visits');

  store.get(1).onsuccess = function(e) {
    if (!e.target.result) {
      var request = store.add({ visits: 1 });
    } else {
      e.target.result.visits++;
      var request = store.put(e.target.result);
    }

    request.onsuccess = function() {
      console.log("Page visits: " + request.result.visits);
    };

    request.onerror = function() {
      console.error("Transaction error: " + request.error);
    };
  };

  store.get(1).onerror = function() {
    console.error("Store get error: " + request.error);
  };
};

结论

根据你的需求选择最适合你的方法。Cookies 适合存储短期数据，而 LocalStorage 和 IndexedDB 则适用于更长时间的数据存储。选择哪种方法取决于你对数据持久性和数据量需求的考量。

-- 展开阅读全文 --