前回、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);
ボタンをクリック後にブラウザをリロードしてみてください。ローカルストレージの中身は空になります。
最後に
ローカルストレージの値がページを超えて渡せるのは感動しました!
リンク先のURLにパラメータを付けないで済むので、ユーザーの警戒感が低くなる効果が見込めると思います!
ほとんどローカルのみの挙動なのでcookieよりセキュリティ面でも優れていますし、JSのみで完結するため、大掛かりなASPシステムも不要です。メリットがたくさんありますね!
また新しい活用法があればご紹介したく思います。ではまた。
※参考:ネイティブJSやってみたシリーズ
qiita.com