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

HTML DOM localStorageプロパティとは？使い方を実例つきでわかりやすく解説

HTML DOMのlocalStorageプロパティを使うと、キーと値のペア（Key-Valueペア）をユーザーのブラウザ内に直接保存し、必要なときにいつでも参照できます。保存されたデータは明示的に削除・クリアしない限り失われないため、ページの再読み込みやブラウザの再起動後も保持されます。

構文

localStorageの構文は以下のとおりです。

Window.localStorage

localStorageオブジェクトには、主に次のようなメソッドが用意されています。

  • setItem('key', 'value') … 指定したキー名で値を保存する
  • getItem('key') … 指定したキー名に対応する値を取得する
  • removeItem('key') … 指定したキーのデータを1件だけ削除する
  • clear() … localStorageに保存されているすべてのデータを一括削除する

それでは、localStorageプロパティの具体的な使用例を見てみましょう。

サンプルコード

次の例では、「キーを保存」ボタンでlocalStorageにデータを書き込み、「キーを削除」ボタンでclear()メソッドによりすべてのデータを削除しています。

<!DOCTYPE html>
<html>
<head>
<title>LocalStorage clear()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    table,th,td {
        border:1px solid black;
        border-collapse: collapse;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>LocalStorage clear( )</legend>
            <table>
                <tr>
                    <th>キー</th>
                    <th>値</th>
                </tr>
                <tr>
                    <td>PassKey</td>
                    <td>ja12ertplo</td>
                </tr>
            </table>
            <input type="button" value="キーを保存" onclick="storeData()">
            <input type="button" value="キーを削除" onclick="clearData()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        function storeData(){
            localStorage.setItem('PassKey','ja12ertplo');
            divDisplay.textContent = '正常に保存されました';
        }
        function clearData(){
            localStorage.clear();
            divDisplay.textContent = '正常に削除されました';
        }
    </script>
</body>
</html>

実行結果

「キーを保存」ボタンをクリックすると、PassKeyとその値がlocalStorageに保存され、画面に完了メッセージが表示されます。

HTML DOM localStorageプロパティとは？使い方を実例つきでわかりやすく解説

「キーを削除」ボタンをクリックすると、clear()メソッドによって保存されていたすべてのデータが削除されます。

HTML DOM localStorageプロパティとは？使い方を実例つきでわかりやすく解説

localStorage利用時の注意点

  • 保存できるのは文字列のみです。オブジェクトや配列を扱う場合は、保存時にJSON.stringify()で変換し、取得時にJSON.parse()で復元します。
  • 保存容量はオリジン（ドメイン）ごとにおよそ5MB程度とされています。
  • データは同一オリジン内でのみ共有され、別ドメインからアクセスすることはできません。
  • ユーザーが開発者ツールなどで内容を簡単に確認・削除できるため、パスワードなどの機密情報の保存には適していません。
  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注