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

【初心者向け】HTML5のローカルストレージ（localStorage）で名前を永続的に保存する方法

ローカルストレージ（localStorage）とは？

Web Storage APIのひとつであるlocalStorageは、複数のウィンドウやタブをまたいで利用でき、現在のセッションが終了してもデータが保持されるように設計されたクライアント側の保存領域です。ユーザーが作成したドキュメントやメールボックスのように数メガバイト規模になるデータを、パフォーマンス向上のためにブラウザ側へ保存したいWebアプリケーションにとって、非常に有用な仕組みです。

HTML5のlocalStorageには有効期限がありません。そのため、ブラウザを閉じても保存したデータは削除されず、永続的に残り続けます。一方、sessionStorageはセッション中のみ有効で、ブラウザを閉じるとデータは失われるという点が大きな違いです。

ここでは例として、ユーザーの「名前」をlocalStorageに保存し、画面に表示する方法を紹介します。

【初心者向け】HTML5のローカルストレージ（localStorage）で名前を永続的に保存する方法

名前を永続的に保存するサンプルコード

以下のコードを実行すると、localStorageに名前を保存し、それを取得して表示できます。

Example

<!DOCTYPE html>
<html>
   <body>
      <div id = "demo"></div>
      <script>
         if (typeof(Storage) !== "undefined") {
            localStorage.setItem("name", "John");
            document.getElementById("demo").innerHTML = localStorage.getItem("name");
         } else {
            document.getElementById("demo").innerHTML =
            "The browser do not support Web Storage";
         }
      </script>
   </body>
</html>

コードのポイント解説

  • setItem("name", "John")：キー「name」に対して値「John」を保存します。
  • getItem("name")：指定したキーに対応する保存済みの値を取り出します。
  • typeof(Storage) !== "undefined"：実行前にブラウザがWeb Storageに対応しているかどうかをチェックし、非対応の場合はエラーではなくメッセージを表示します。

なお、保存したデータだけを削除したい場合は localStorage.removeItem("name") を、保存済みの全データを一括で消去したい場合は localStorage.clear() を使用します。用途に応じてこれらのメソッドを使い分けることで、ユーザー設定や入力履歴などを快適に管理できます。

  1. 【初心者向け】HTML5ジオロケーションとGoogleマップで現在地を表示する方法

    HTML5のGeolocation API（ジオロケーションAPI）を使うと、Webサイトと位置情報を共有できるようになります。JavaScriptでデバイスの緯度・経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、周辺店舗の検索や地図上への現在地表示など、位置情報を活用したさまざまな機能を実装できます。ジオロケーションの座標は、デバイスの地理的な位置を正確に特定するための情報です。 getCurrentPosition()メソッドの仕組み Geolocation APIでは、getCurrentPosition()などのメソッドに対して、位置情報を取得するためのコールバ

  2. HTML5のlocalStorage APIを使ってブラウザにデータを保存する方法

    HTML5 localStorageとは HTML5のlocalStorageは、文字列データをブラウザ内に保存し、現在のセッションが終了してもデータを保持し続けることができる仕組みです。localStorageは有効期限なしでデータを保存します。一方、sessionStorageはセッション中のみ有効であり、ブラウザを閉じると保存されたデータは失われます。 localStorageの用途と特徴 ローカルストレージは、複数のウィンドウ間で共有でき、セッションをまたいでもデータが持続するストレージとして設計されています。特に、Webアプリケーションではパフォーマンス向上のために、ユーザーが作成