はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptを使用したWeb開発者の方を対象にしているかもしれません。この記事を読むことで、Prompt入力した値をlocalStorageに保存し、遷移先のページでその値を使用する方法がわかるようになるでしょう。具体的には、次の点について説明します。 * Prompt入力値をlocalStorageに保存する方法 * 遷移先のページでlocalStorageから値を取り出す方法

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * JavaScriptの基本的な知識 * HTML/CSSの基礎的な知識

JavaScriptでプロンプト入力値を保存する方法

ここでは、JavaScriptでプロンプト入力値を保存する方法について説明します。ブラウザには、localStorageというキーと値のペアを保存できる領域があります。localStorageは、ページを読み込むたびにデータが初期化されないので、プロンプト入力値を保存するのに適しています。

プロンプト入力値を遷移先で使用する方法

ここが記事のメインパートです。具体的なコードを交えて解説します。

Prompt入力値をlocalStorageに保存する

まずは、プロンプト入力値をlocalStorageに保存する方法を説明します。

Javascript

const inputValue = prompt("入力してください");
localStorage.setItem("inputValue", inputValue);

次に、遷移先のページでlocalStorageから値を取り出す方法を説明します。

Javascript

const storedValue = localStorage.getItem("inputValue");
console.log(storedValue);

location.hrefで遷移する

次に、location.hrefで遷移する方法を説明します。

Javascript

location.href = "https://example.com";

ハマった点やエラー解決

実装中に遭遇する問題や、エラーの解決方法について記載します。読者が同じ問題で時間を浪費しないように、できるだけ具体的に書きましょう。

解決策

プロンプト入力値をlocalStorageに保存し、遷移先のページでその値を使用する方法を紹介しました。ただし、セキュリティ上の問題を考慮する必要があります。例えば、悪意のあるコードがプロンプト入力値を読み取ったり、書き換えたりする可能性があります。そのため、プロンプト入力値を保存する場合には、適切なセキュリティ対策を講じる必要があります。

まとめ

本記事では、JavaScriptでプロンプト入力値を遷移先で使用する方法を紹介しました。

  • Prompt入力値をlocalStorageに保存する方法
  • 遷移先のページでlocalStorageから値を取り出す方法
  • location.hrefで遷移する方法

この記事を通して、プロンプト入力値を遷移先で使用する方法についてわかった点を改めて伝えます。 今後は、セキュリティ対策についても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。