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

JavaScriptでHTMLをローカルに保存するには？Cookieを使った実装方法を解説

JavaScriptでHTMLをローカルに保存する方法

JavaScriptを使ってデータをブラウザ上にローカル保存したい場合、Cookie（クッキー）を利用するのが基本的な方法の一つです。Cookieはユーザーのブラウザ内に小さなテキストデータとして保存され、ページを再読み込みしても値が保持されるため、訪問回数の記録などに活用できます。

以下は、Cookieを使ってページの表示回数を記録・表示するシンプルなサンプルコードです。このコードをHTMLファイルとして保存し、ブラウザで開くだけで動作します。

<!DOCTYPE html>
<html>
<body>
  <p id="visits"></p>
  <script>
    var visits = parseInt(document.cookie.split("=")[1]);
    if (isNaN(visits)) visits = 0;
    visits++;
    document.cookie = "visits =" + visits;
    document.getElementById("visits").innerHTML = "このページは " + visits + " 回実行されました。";
  </script>
</body>
</html>

コードの解説

  • document.cookie.split("=")[1]：Cookieから保存済みの訪問回数を読み取ります。
  • isNaN(visits)：初回アクセス時などCookieが存在しない場合は、0に初期化されます。
  • visits++：訪問回数を1つ増やします。
  • document.cookie = "visits =" + visits：新しい訪問回数をCookieに書き戻します。
  • getElementById("visits").innerHTML：結果を画面に表示します。

実行方法

上記のコードを「index.html」などの名前で保存し、ChromeやFirefoxなどのWebブラウザで開くだけです。ページを再読み込みするたびにカウントが増えていけば、Cookieが正しく機能していることが確認できます。

補足：より現代的な保存方法「localStorage」

Cookie以外にも、localStorageやsessionStorageといったWeb Storage APIを使えば、より簡単に、しかも大容量のデータをローカルに保存できます。同じ処理をlocalStorageで書くと以下のようになります。

<script>
  var visits = parseInt(localStorage.getItem("visits")) || 0;
  visits++;
  localStorage.setItem("visits", visits);
  document.getElementById("visits").innerHTML = "このページは " + visits + " 回実行されました。";
</script>

有効期限を持たせたい場合はCookie、単純に永続的にデータを保持したい場合はlocalStorageといったように、用途に応じて使い分けるのがおすすめです。

  1. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st

  2. JavaScriptで画面解像度を検出する方法を解説！window.screenの使い方

    はじめにWebアプリケーションを開発する際、ユーザーの画面解像度（スクリーンサイズ）を検出したいケースは多くあります。例えば、レスポンシブデザインの調整や、表示領域に応じたコンテンツの出し分けなどが挙げられます。JavaScriptでは、window.screenオブジェクトを使うことで、簡単に画面の解像度情報を取得できます。この記事では、その具体的な方法をサンプルコードとともにわかりやすく解説します。window.screenオブジェクトとはwindow.screenは、ユーザーが使用しているディスプレイ（画面）に関する情報を保持しているオブジェクトです。このオブジェクトのプロパティを参照す