JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでブラウザの閲覧履歴にアクセスする方法

JavaScriptでは、window.historyオブジェクト（History API）を利用することで、ブラウザのセッション履歴にアクセスできます。現在のセッションで訪れたページの数を取得したり、プログラムから「戻る」「進む」の操作を実行したりすることが可能です。


なお、セキュリティとプライバシー保護の観点から、JavaScriptで扱えるのは履歴の「件数」や「前後への移動」のみであり、ユーザーが訪れた具体的なURLを取得することはできない点に注意してください。


以下は、JavaScriptで閲覧履歴にアクセスするためのサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>閲覧履歴にアクセスするプログラム</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると履歴の長さが表示されます</h3>
<button class="Btn">FORWARD</button>
<button class="Btn">BACKWARD</button>
<h3>上のボタンをクリックすると前後のページへ移動します</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelectorAll(".Btn");
    BtnEle[0].addEventListener("click", () => {
        resEle.innerHTML = window.history.length;
    });
    BtnEle[1].addEventListener("click", () => {
        window.history.forward();
    });
    BtnEle[2].addEventListener("click", () => {
        window.history.back();
    });
</script>
</body>
</html>

コードの解説

このコードで使用しているHistory APIの主な機能は以下のとおりです。

  • window.history.length：現在のセッション履歴に含まれるページの総数を取得します。
  • window.history.forward()：履歴上で次のページ（進む）へ移動します。
  • window.history.back()：履歴上で前のページ（戻る）へ移動します。

出力結果

上記のコードを実行すると、以下のような画面が表示されます。

JavaScriptでブラウザの閲覧履歴にアクセスする方法

「CLICK HERE」ボタンをクリックすると、履歴の長さ（length）が画面に表示されます。

JavaScriptでブラウザの閲覧履歴にアクセスする方法

「BACKWARD」ボタンをクリックすると、履歴上の前のページへ移動します。

JavaScriptでブラウザの閲覧履歴にアクセスする方法

  1. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <

  2. JavaScriptでHTMLボタンをクリックしたときにアラートを表示する方法

    ボタンをクリックしたときにアラートを表示するには、JavaScriptのaddEventListener()メソッドを使用します。例として、HTMLページ上に以下のようなボタンが配置されている場合を考えてみましょう。<button type=button>Please Press Me</button>サンプルコード以下は、ボタンがクリックされたときにアラートを表示する完全なコード例です。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> &