(新規タブで開いてください)。コンソールを開いてください。ウェブストレージ・データのすべては、ブラウザー内部の二つのオブジェクト的な構造体の中に含まれます。(ブラウザーを閉じるとデータは失われます)。後者は、ブラウザーを閉じて、それから再びブラウザーを開いた後でさえも、データを存続させます。一般的には後者の方がより有用なので、本記事では後者を使います。メソッドによって、ストレージ内にデータ項目を保存できます。このメソッドは二つの引数をとります。その項目の名前と、その値です。メソッドは一つの引数をとります。取り出したいデータ項目の名前です。このメソッドは、その項目の値を返します。コンソールに以下の行を打ち込んでください。いうデータ項目の値を保有していることが分かるはずです。メソッドは一つの引数をとります。削除したいデータ項目の名前です。このメソッドは、ウェブストレージからその項目を削除します。コンソールに以下の行を打ち込んでください。いう項目はウェブストレージ内に存在しないからです。データが存続する、という点です。この特徴が機能しているところを見てみましょう。一度、ウェブストレージの空白テンプレートを開いてください。することで、取り扱いがしやすくなるでしょう。コンソールに打ち込んでください。いう項目が返されるのが分かるはずです。ここでブラウザーを終了させてから再び起動して開いてください。以下の行を入力してください。localStorage.getItem('name');myNameブラウザーを終了させてから再び開いたというのに、それでも依然として値が利用可能である、ということが分かるはずです。(ブラウザーにロードされた別々のウェブ・アドレスごとに)、別々のデータストアがあります。ロードして、一方のウェブサイトで項目を保存してみると、その項目は他方のウェブサイトでは利用できない、と分かるでしょう。これには意義があります。この新たに得た知識を応用してみましょう。この事例では、名前を入力できるようにします。その入力の後、個人に合わせた挨拶を表示するべく、ページが更新されます。この状態は、ページ/ブラウザーのリロードをまたいでも存続するでしょう。名前がウェブストレージに記憶されているからです。これは、ヘッダーとコンテンツとフッターを備えた簡素なウェブサイトと、名前を入力するためのフォームとを含みます。この例を組み上げましょう。すると、これがどのように機能するのか理解できるでしょう。いうファイルのローカルコピーを作ってください。コードを書き込む必要があります。いうファイルを作成してください。すべてに対する参照を作るところから取り掛かりましょう。それらの参照のすべてを定数として作ります。これらの参照は、アプリのライフサイクル内で変化する必要がないからです。ファイルに追加してください。必要な定数を作ります。document.querySelector('.personal-greeting');次に、送信ボタンが押されたときにフォームが実際にこのフォーム自体を送信することをやめさせるための、小規模なイベント・リスナーを含める必要があります。いうのも、こうした送信は所望の振る舞いではないからです。以下に示すスニペットを、前のコードに追加してください。ボタンが押されたときにフォームが送信することをやめさせます。e.preventDefault();});さてここで、イベント・リスナーを追加せねばなりません。ボタンがクリックされたときに実行されます。呼ばれる関数を実行しています。これをコードの末尾に加えてください。ボタンがクリックされたら関数を実行します。入力された名前をウェブストレージに保存します。ボタンがクリックされたときに関数を実行するためのイベント・ハンドラーも必要です。(二つのフォーム状態が行ったり来たり切り替わります)。これを末尾に付け加えてください。ボタンがクリックされたら関数を実行します。保存してある名前をウェブストレージから削除します。いう関数そのものを定義すべきときです。いう項目がウェブストレージに保存済みかどうかを調べます。