【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す！

前回、URLの後ろにつけたパラメータをフォームのinputタグのvalueに渡す方法をご紹介いたしました。その続きになります。
この時ネックになったのが、別ページへの回遊やサイト離脱です。再訪したユーザーがフォームを送信するときにはパラメータが失われているため効果の計測ができません。
この対策として「ローカルストレージ」を試してみました。それでは、どうぞ。

※参考：前回の記事
【JS】フォームのinputタグにURLパラメータを渡す方法 - クモのようにコツコツと

※目次：

ローカルストレージとはなんぞや
ローカルストレージの基本書式
リンク元ページのローカルストレージにデータを保存
リンク先ページのローカルストレージでデータを取得
フォームのinputのvalueに値を渡す
inputタグのtype属性をhiddenにして非表示に
ローカルストレージの値を削除
最後に

ローカルストレージとはなんぞや

冒頭に書いたように回遊や離脱をしたユーザーの再訪を計測することは難しいのですが、その対策として以前からある技術に「Cookie」というものがあります。「クッキー」と読みます。食べられない方のクッキー*1、芸人じゃない方のクッキーです。

サルワカさんのページが詳しい。間違いやすいキャッシュとの違いもよくわかる！

※参考：クッキー（cookie）とは？初心者でも分かるように図解

しかしながら、前回の最後にも触れたように、Cookieはだんだんと好まれない風潮になりつつあるような気がしないでもない今日この頃です。
例えばSafariはサイトを超えたCookie情報の送信（サードパーテcookie）をブロックする「ITP」という機能を搭載しました。

※参考：サードパーティCookie制限の時代、Safari 11のITPで到来。広告主はAdWordsとGAの連携で対策を! | リスティング広告運用でビジネススキルも磨く | Web担当者Forum

Cookieに変わる技術として注目されるのが「ローカルストレージ」です。基本的にブラウザのローカル領域に情報が溜まり、サーバとの無駄な通信は生じません。もう一つの「セッションストレージ」と併せて「Webストレージ」と言います。

※Webストレージ

ローカルストレージ：ブラウザを閉じても情報が残る
セッションストレージ：ブラウザを閉じると情報が消える

このページの解説が詳しい。Cookieとの違いがよくわかる！

※参考：ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方 | 株式会社グランフェアズ

Caniuseで見るとすでにローカルストレージは全ブラウザが対応済みです！IEタソも対応していた模様。よしよし、いい子だ。

※参考：Can I use... Support tables for HTML5, CSS3, etc

時がきた！それだけだ。

ローカルストレージの基本書式

ローカルストレージの基本書式はこんなです。

//データの保存
localStorage.setItem('キー', '値');

//データの取得
localStorage.getItem('キー', '値');

//データの削除
localStorage.removeItem('キー');

保存はsetItem()メソッド、取得はgetItem()メソッド。sとgの違いなので覚えやすいですね。引数にはキー、値の順番で入れます。
削除はremoveItem()メソッド。こちらの引数はキーのみです。*2

このsetItem()メソッドをリンク元ページ、getItem()メソッドをリンク先ページに書くと、ななんとページを超えて値を渡すことができます！！

リンク元ページのローカルストレージにデータを保存

例えばこんなページがあるとする。

<article>
<h1>絶対に絶対に絶対にたったの1秒で億万長者になれる方法をあなただけにこっそり伝授！！！！！！！</h1>
<img src="img/main.jpg" alt="札束のお風呂に浸かる男の写真">

<section class="setumei">
<h2>説明タイトル説明タイトル説明タイトル</h2>
<p>説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。</p>
</section>

<section class="setumei">
<h2>説明タイトル説明タイトル説明タイトル</h2>
<p>説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。</p>
</section>

<section class="ketsuron">
<h2>結論タイトル結論タイトル結論タイトル</h2>
<p>大金持ちになれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれるぞぉーーーー！！。</p>
</section>

<aside id="btn"><a href="form.html">今すぐ問い合わせる！！</a></aside>

</article>

こんな感じのページです。どうですか、ものすごく興味がそそられる内容でしょう？

この#btnのボタンをクリックしたらローカルストレージに値を保存したい。JSを書き加えます。

//DOM
var btn = document.getElementById("btn");

//クリックイベント
btn.addEventListener("click", function () { 

//データの保存
localStorage.setItem('boowy', 'psycho');

}, false);
}

変数btnにID#btnのボタンのDOMを取得
btnにイベントリスナでクリックイベントを設定
btnをクリックするとローカルストレージのboowyキーの値psychoと保存（BOØWYは最高）。

リンク先ページのローカルストレージでデータを取得

次にリンク先のページを作ります。

<P class="text">リンク元のデータ「boowy」の値は「<span id="thisreferer"></span>」です。</P>

id#thisrefererのspanタグにリンク元ページのローカルストレージの値を表示したい。

var referer = localStorage.getItem('boowy');
  document.getElementById("thisreferer").innerHTML = referer;

変数refererでリンク元ページのboowyキーのローカルストレージを取得
#thisrefererのタグの中身をrefererを代入

こんな感じです。まだspanタグの中身は空欄だと思います

先ほどJSを書き加えたリンク元ページはこちらです。

さあ、遠慮せずに「今すぐ問い合わせる」ボタンをクリックしてみてください！！

…どうですか？別タブで開いたリンク先のページにはpsycho（最高）の文字が表示されてませんか？おめでとうございます！リンク元ページのローカルストレージの値がページを超えてリンク先ページのローカルストレージに保存されました！

フォームのinputのvalueに値を渡す

ページを超えてローカルストレージの値が渡せることがわかりました。次に、前回のパラメータと同様にこの値をフォームのinputタグのvalue属性に渡したいですね。フォームはこのような形です。

    <form action="php/form.php" method="post" id="test" name="test">
      <dl>
        <dt>名前</dt>
        <dd>
          <input type="text" name="名前" id="name">
        </dd>
      </dl>
      <dl>
        <dt>E-mail</dt>
        <dd>
          <input type="text" name="E-mail" id="e-mail">
        </dd>
      </dl>
      <dl>
        <dt>URL</dt>
        <dd>
          <input type="text" name="URL" id="inputurl">
        </dd>
      </dl>
      <dl>
        <dt>ローカルストレージ</dt>
        <dd>
          <input type="text" name="referer" id="inputreferer">
        </dd>
      </dl>
      <input type="submit" value="送信する">
    </form>

前回のID#inputparamを#inputrefererに変更しました。

次にJSを追記します。

var referer = localStorage.getItem('boowy');
  document.getElementById("thisreferer").innerHTML = referer;
  document.getElementById("inputreferer").value = referer;

id#inputrefererのvalue属性をrefererに

先ほどのリンク元のボタンのURLを変更しました。また、キーboowyの値をboowy2にしました。
「今すぐ問い合わせる」ボタンをクリックしてみてください！！

どうですか？「ローカルストレージ」のところに「psycho2」が表示されたはずです。

inputタグのtype属性をhiddenにして非表示に

前回同様、inputタグのtype属性をhiddenにして非表示にしたい。

      <dl>
        <dt><!--ローカルストレージ--></dt>
        <dd>
          <input type="hidden" name="referer" id="inputreferer">
        </dd>
      </dl>

またまたリンク元のボタンのURLを変更。また、キーboowyの値をboowy 3にしました。「今すぐ問い合わせる」ボタンをクリックしてみてください。

ブラウザのデベロッパーツールで「ローカルストレージ」のinputタグのvalueをみていただくと「psycho3」になっているはずです。

なお、デベロッパーツールの「application」タブを開くとローカルストレージのキーと値が確認できます！

※参考各ブラウザでWebStorage（LocalStorage）を確認する方法 - Qiita

ローカルストレージの値を削除

さあ、ここまで進んだあなたのブラウザのローカルストレージはboowyキーの値が上書きされてpsycho3になっていると思います。ここから別のボタンをクリックすると、そのたびに値は上書きされます。

もういちど最初の状態からやり直したい方は、こちらの「今すぐ値を削除」ボタンを押してください。

ちなみにこのボタンには最初に紹介したremoveItem()メソッドを設定しています。

//DOM
var btn = document.getElementById("btn");

//クリックイベント
btn.addEventListener("click", function () { 

//データの削除
localStorage.removeItem('boowy');

}, false);