テキストエリアに入力した文章を自動保存し、誤ってページを移動したり、再読み込みしたりしても、入力内容が消えないようにする方法を紹介します。文章を入力するたびに内容が保存されるため、保存ボタンを押す必要はありません。
ページを離れてから戻った場合や、ブラウザを閉じて再度開いた場合も、保存されている文章を自動的に復元します。入力途中の長い文章を最初から書き直す手間を減らせます。また、「入力内容を削除」ボタンを押すと、入力欄の文章と保存データをまとめて削除できます。
保存にはJavaScriptのlocalStorageを使用しており、入力した文章は同じブラウザ内に保持されます。保存された文章はテキストエリアの入力値として取得でき、別の処理にも利用できます。今回は複数行入力できるテキストエリアを使用し、1行入力のテキストフィールドへの変更方法は、下記の「ファイル構成と設置方法」で説明します。
デモ
テキストエリアに文章を入力すると、その内容がブラウザに自動保存されます。「ページを再読み込み」をクリックすると、入力した文章が復元されることを確認できます。別のページへ移動して戻った場合も、保存内容が残っていれば復元されます。「入力内容を削除」をクリックすると、入力欄と保存データの両方が削除されます。保存内容は同じブラウザで保持されますが、ブラウザの保存データを削除した場合や、別の端末では復元されません。テキストフィールドで使用したい場合は、下記の「ファイル構成と設置方法」を参考にしてください。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの指定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>入力内容を自動保存するテキストエリア</title>
<!-- テキストエリアのデザインを読み込み -->
<link rel="stylesheet" href="style.css">
<!-- 入力内容の保存・復元処理を読み込み -->
<script src="script.js" defer></script>
</head>
<body>
<!-- 入力内容を自動保存するテキストエリア -->
<div class="textarea-auto-save_container">
<!-- 入力欄のラベル -->
<label class="textarea-auto-save_label" for="textarea-auto-save-field">
文章を入力してください
</label>
<!-- 入力内容を保存するテキストエリア -->
<textarea
class="textarea-auto-save_input"
id="textarea-auto-save-field"
name="textarea-auto-save-field"
placeholder="ここに入力した文章は自動保存されます"
></textarea>
<!-- 入力欄と保存データを削除するボタン -->
<div class="textarea-auto-save_actions">
<button
class="textarea-auto-save_clear"
type="button"
id="textarea-auto-save-clear"
>
入力内容を削除
</button>
</div>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
テキストエリアに入力した文章をブラウザへ自動保存し、ページを移動したり再読み込みしたりしても、保存された内容を復元するサンプルです。入力するたびに保存内容が更新され、「入力内容を削除」ボタンから入力欄と保存データをまとめて削除できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlにはテキストエリアと削除ボタンを配置し、style.cssで入力欄のサイズ・枠線・余白・ボタンのデザインを設定しています。script.jsでは、入力内容の保存・復元・削除を行います。
設置方法・使い方
「サンプル一式をダウンロード」からZIPファイルを保存して展開し、sampleフォルダ内の3つのファイルを同じ階層に配置してください。Webサーバーへアップロードしてindex.htmlを開くと、テキストエリアを使用できます。文章を入力した後にページを再読み込みすると、保存された内容が自動的に復元されます。なお、localStorageは通常のWebページとして動作させることを前提とし、ブラウザでHTMLファイルを直接開いた場合の動作は環境によって異なります。
入力内容を自動保存する仕組み
script.jsでは、localStorageを使用して、入力した文章をブラウザ内に保存しています。保存する際には、どの入力欄のデータなのかを区別するために、保存用の名前（キー）を付けます。今回のコードでは、textarea-auto-save-contentという名前を使用しています。この名前は自由に変更できますが、同じサイト内で複数の入力欄を設置する場合は、保存内容が混ざらないように、それぞれ異なる名前を付けてください。
// 保存データを識別するキー
// 同じサイト内の別の入力欄と区別する場合は変更してください
const storageKey = "textarea-auto-save-content";
// 入力内容が変更されるたびに保存する
textarea.addEventListener("input", function() {
localStorage.setItem(storageKey, textarea.value);
});
inputイベントは、文字を入力したり、削除したり、文章を貼り付けたりしたときに発生します。入力内容が変わるたびにlocalStorage.setItem()が実行され、指定した保存用の名前に現在の文章が保存されます。例えば「こんにちは」と入力すると、その文章が保存され、続けて「こんにちは,こんばんは」に変更すると、同じ名前で保存されている内容が新しい文章に上書きされます。この処理が入力のたびに自動で行われるため、保存ボタンを押す必要はありません。
保存された文章を復元する仕組み
ページを開いたときは、localStorage.getItem()で保存済みの文章を取得します。保存データが存在する場合は、取得した文字列をテキストエリアのvalueへ代入して復元します。
// 保存されている文章を取得する
const savedValue = localStorage.getItem(storageKey);
// 保存データが存在する場合は入力欄へ復元する
if (savedValue !== null) {
textarea.value = savedValue;
}
savedValue !== nullは、保存データが存在するかを確認する条件です。保存されている文章が空文字の場合も含めて判定でき、保存データがない場合は入力欄をそのまま表示します。ブラウザを閉じた後でも保存データが残っていれば復元できますが、別のブラウザや端末には引き継がれません。また、ブラウザの保存データを削除した場合も復元できなくなります。
入力内容と保存データを削除する仕組み
「入力内容を削除」ボタンをクリックすると、テキストエリアを空にした後、localStorage.removeItem()で保存データを削除します。最後にfocus()を実行し、続けて文章を入力できる状態に戻します。
// 入力欄と保存データを削除する
clearButton.addEventListener("click", function() {
textarea.value = "";
localStorage.removeItem(storageKey);
textarea.focus();
});
入力された文章を取得する方法
テキストエリアの入力内容は、valueプロパティから文字列として取得できます。次のコードは取得方法を示す例であり、掲載しているscript.jsへ追加する必要はありません。実際に使用する場合は、入力内容を取得したいタイミングで実行してください。
// テキストエリアから現在の文章を取得する
const value = document.getElementById("textarea-auto-save-field").value;
取得したvalueには改行を含む文章も保持されます。例えば、入力内容の確認や別のJavaScript処理などに利用できます。なお、localStorageに保存されている文章を直接取得したい場合は、localStorage.getItem("textarea-auto-save-content")を使用します。
テキストフィールドへ変更する方法
1行入力のテキストフィールドで使用する場合は、index.htmlのtextarea要素をinput要素に変更します。idとclassを同じ名前にしておけば、入力内容の保存・復元・削除に使用するscript.jsを変更する必要はありません。
変更前のテキストエリアは次のコードです。
<!-- 入力内容を保存するテキストエリア -->
<textarea
class="textarea-auto-save_input"
id="textarea-auto-save-field"
name="textarea-auto-save-field"
placeholder="ここに入力した文章は自動保存されます"
></textarea>
次のようにinput要素へ置き換えると、1行入力のテキストフィールドになります。
<!-- 入力内容を保存するテキストフィールド -->
<input
class="textarea-auto-save_input"
type="text"
id="textarea-auto-save-field"
name="textarea-auto-save-field"
placeholder="ここに入力した文字は自動保存されます"
>
type="text"は1行入力のテキストフィールドを指定しています。テキストエリアと異なり、改行を含む文章は入力できません。ラベルの「文章を入力してください」も、必要に応じて「文字を入力してください」などに変更できます。
また、テキストフィールドでは複数行入力用の高さやサイズ変更が不要になるため、style.cssの.textarea-auto-save_inputからmin-height: 180px;とresize: vertical;を削除してください。入力欄の横幅・余白・枠線などの設定はそのまま使用できます。
テキストフィールドへ変更した場合も、入力値はvalueプロパティから取得できます。HTMLのidを変更していないため、取得コードもテキストエリアと共通です。
レスポンシブ対応
style.cssでは、入力欄全体の最大横幅を480pxに設定しています。width: 100%によって親要素の横幅に合わせて縮小されるため、PC・タブレット・スマートフォンで利用できます。max-widthの数値を変更すると、入力欄全体の最大横幅を調整できます。
/* =========================================
テキストエリア全体
========================================= */
.textarea-auto-save_container {
width: 100%; /* 親要素の横幅に合わせて表示する */
max-width: 480px; /* 最大横幅。大きくすると入力欄が広がる */
margin: 0 auto; /* 左右中央に配置する */
box-sizing: border-box;
}
画面幅が640px以下になると、入力欄の内側余白を16pxから14pxへ変更し、削除ボタンを横幅いっぱいに表示します。640pxの数値を変更すると、スマートフォン向けの表示へ切り替わる画面幅を調整できます。この設定はテキストフィールドへ変更した場合も適用されます。
/* =========================================
レスポンシブ対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下で入力欄の余白を調整 */
.textarea-auto-save_input {
padding: 14px; /* スマートフォン表示時の内側余白 */
}
/* 画面幅640px以下で削除ボタンを横幅いっぱいに表示 */
.textarea-auto-save_clear {
width: 100%;
}
}
コメント